app-builders-club

@app-builders-club source repo

22 skills
0 followers
9 hours ago last updated

▌
Figma Create New File · app-builders-club
Create a new blank Figma file. Use when the user wants to create a new Figma design or FigJam file, or when you need a new file before calling use_figma. Handles plan resolution via whoami if needed. Usage — /figma-create-new-file [editorType] [fileName] (e.g. /figma-create-new-file figjam My Whiteboard)

0
installs
▌
Figma Create Design System Rules · app-builders-club
Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design rules", "customize design system guidelines", or wants to establish project-specific conventions for Figma-to-code workflows. Requires Figma MCP server connection.

0
installs
▌
Design · app-builders-club bundle
Knowledge base and rules for the design-builder plugin. Three-layer model (commands -> filters -> knowledge base) for building distinctive production-grade interfaces on web + iOS. Backed by designlib MCP (palettes, fonts, inspiration_pages, landing_patterns, icons, animations), iOS HIG references (iOS 18/26 Liquid Glass), designer motion perspectives (Emil/Jakub/Jhey), anti-pattern detection. This skill is the source of truth — actions live in the plugin's commands/.

0
installs
▌
Motion · app-builders-club bundle
Web animation + short-video knowledge for design-builder. Two modes: (1) UI motion in production web apps — GSAP / WAAPI / CSS / Anime.js / Lottie / Three.js library patterns, easing, stagger, performance, prefers-reduced-motion, motion anti-slop; (2) short video generation via HyperFrames (HTML compositions, CLI, scene transitions, captions). Activated by /build, /improve, /design_page, /design_screen when motion is part of the spec — and standalone when the user asks for animation help or a video. Sister skill to `design`; lives under skills/motion/.

0
installs
▌
Figma Use · app-builders-club bundle
**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first. Skipping it causes common, hard-to-debug failures. Trigger whenever the user wants to perform a write action or a unique read action that requires JavaScript execution in the Figma file context — e.g. create/edit/delete nodes, set up variables or tokens, build components and variants, modify auto-layout or fills, bind variables to properties, or inspect file structure programmatically.

0
installs
▌
Playwright CLI · app-builders-club bundle
Browser automation via @playwright/cli. Use when capturing screenshots of a running web app for design audit, capturing live web pages as design references, inspecting rendered DOM/computed styles for review, or driving end-to-end interaction. Invoked by /design-builder:review (design-auditor) and /design-builder:improve --restructure to ground designs in real rendered visuals. Requires Node 18+; auto-installs via npx on first use.

0
installs
▌
Figma Generate Design · app-builders-club
Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma', 'create a screen', 'build a landing page in Figma', 'update the Figma screen to match code'. This is the preferred workflow skill whenever the user wants to build or update a full page, screen, or view in Figma from code or a description. Discovers design system components, variables, and styles via search_design_system, imports them, and assembles screens incrementally section-by-section using design system tokens instead of hardcoded values.

0
installs
▌
Figma Generate Library · app-builders-club bundle
Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma. This skill teaches WHAT to build and in WHAT ORDER — it complements the `figma-use` skill which teaches HOW to call the Plugin API. Both skills should be loaded together.

0
installs
▌
Prd · app-builders-club
Generate MVP Product Requirements Document through interactive dialogue with incremental validation and saving. Use when the user wants to start a new product, create a PRD, define product vision and scope, or kick off the MVP Builder pipeline.

0
installs
▌
Clarify · app-builders-club
Refine an existing feature specification through targeted clarification dialogue. Use when a spec.md contains ambiguities — vague roles, non-testable requirements, unclear entities — that should be resolved before generating the doc chain.

0
installs
▌
Feature · app-builders-club
Generate feature specifications from PRD or a user-provided feature description into structured spec files. Use after the PRD is finalized to extract all features, or to add a single new feature to an existing FEATURES.md index.

0
installs
▌
Context7 · app-builders-club
Up-to-date library documentation retrieval using Context7 MCP tools. Process THINK → RESOLVE → FETCH → APPLY. Use when fetching library docs, resolving package names to IDs, getting implementation guides, exploring API references. Provides package resolution strategy, trust score evaluation, token scaling (3K-20K), topic selection patterns.

0
installs
▌
Validation · app-builders-club
Validate requirement quality and generate deterministic checklists (CHK###) for a feature. Use after the doc chain is accepted and before feature-setup — produces validation/*.md checklists, resolutions.md, and resolution tasks in tasks.md.

0
installs
▌
Code Analyzer · app-builders-club bundle
Comprehensive codebase analysis for building mental model of project structure, dependencies, and implementation context. Use when needing to: (1) Understand project architecture before review or documentation, (2) Find dependencies and shared modules, (3) Trace execution paths and abstraction layers for similar features, (4) Locate implementation markers (AICODE-*), (5) Prepare context for review, memory generation, or agent creation. Triggers on: analyze code, load code context, scan codebase, understand project structure, trace feature.

0
installs
▌
Doc Templates · app-builders-club bundle
Canonical templates for every MVP Builder pipeline artifact. Use whenever generating, regenerating, or restructuring any ai-docs artifact — spec.md, FEATURES.md, ux.md, ui.md, plan.md, tasks.md, validation checklists, resolutions.md, feedback.md, design-system.md — so the exact section structure downstream agents parse is preserved. Triggers on: generate spec, create feature docs, write tasks, validation checklist, review feedback, design setup, artifact template.

0
installs
▌
System Design · app-builders-club bundle
Decision-tree framework for architectural trade-offs during implementation planning. Classifies the subject into categories (data-heavy, real-time, offline-critical, media-heavy, integration-heavy, frequent UI iteration), loads the minimum relevant references, supplies a question bank with opinionated defaults for caller-driven dialogue, and returns structured decisions (Architectural Decisions, Required Behaviors). Use whenever architectural choices must be committed to a document — protocol selection, pagination or caching strategy, offline sync approach, real-time transport, media upload strategy. Produces decisions, not implementation rules. Implementation details belong in code-level rules files.

0
installs
▌
Figma Extractor · app-builders-club bundle
Extract design tokens, styles, component metadata, and screen structure from Figma files via MCP. Use whenever a figma.com URL appears, when someone mentions Figma tokens, variables, design system extraction, screen captures, text styles, shadows, component properties, or library assets. Trigger for phrases like 'get from Figma', 'extract design', 'Figma variables', 'design tokens', 'capture screens', 'get typography from Figma', 'extract shadows', 'find components in library', 'get code syntax for tokens', or any figma.com/design link. Even if the user just pastes a Figma link without instructions, use this skill to parse it and decide what to extract. Covers three extraction depths: Level 1 (quick read-only MCP), Level 2 (deep extraction via Plugin API scripts), Level 3 (library search + component property metadata).

0
installs
▌
Self Commenting · app-builders-club bundle
AI-native code commenting system with grep-searchable AICODE-* markers for cross-session memory. Use when: working with code files, leaving notes for future sessions, breaking down complex tasks, documenting non-obvious logic, recording bug fixes. Triggers: start coding session, edit code, complex logic, leave note, todo for later, debug session, bug fix, AICODE markers, self-commenting.

0
installs
▌
Feature Analyzer · app-builders-club bundle
Comprehensive feature artifact analysis for loading and understanding complete feature context. Use when needing to: (1) Load all feature documentation before implementation, (2) Build mental model of feature requirements and architecture, (3) Prepare context for downstream operations like checklist generation or task execution, (4) Analyze feature completeness and artifact availability. Triggers on: analyze feature, load feature context, prepare feature, check feature prerequisites, understand feature scope.

0
installs
▌
Mvp Builder Init · app-builders-club
Initialize a project for the MVP Builder pipeline. Copies the scaffold into the current project — project instructions (CLAUDE.md), path-scoped platform rules, and curated permissions. Run once per project after installing the mvp-builder plugin; also handles upgrades and migration from pre-plugin installs.

0
installs
▌
Frontend Playwright · app-builders-club bundle
Visual QA gate for frontend code. ALWAYS use before delivering any UI changes - navigate, screenshot, verify console is error-free. Use for: responsive testing across viewports, form/interaction testing, debugging hydration and render issues. Catches visual bugs before users see them.

0
installs
▌
Sequential Thinking · app-builders-club bundle
Structured reasoning harness for problems where shallow thinking fails or hallucination is costly. Use whenever a question requires multi-step reasoning, involves competing hypotheses, has multiple interacting components, or carries irreversible consequences. Activate for debugging with unclear root causes, intermittent or multi-component issues, incident post-mortems, choosing between multiple valid approaches, architecture or design tradeoffs, causal chain analysis, high-stakes decisions, and any task where the first plausible answer is suspiciously easy. Provides reasoning modes (abductive, counterfactual, first-principles, inversion, and more), grounding techniques against confabulation, adversarial self-checks, root-cause playbooks, and automatic multi-approach synthesis (independent angles run in parallel and compared) — all through the sequential-thinking MCP tool. Skip for trivial lookups, obvious fixes, and single-step questions.

0
installs

22 published skills