Geeklego logoGeeklego

Skills

Reusable AI prompt programs that automate common workflows in this project.

What are Skills?

Skills are Markdown files stored in .claude/skills/. Each skill encodes a multi-step workflow — with instructions and output formats — so you don't have to re-explain the same process every session. They run as slash commands in any AI coding tool that supports them.

Using a Skill

Type the skill name as a slash command in your AI tool:

1/component-builder2/security3/doc-generator4/figma-sync5/i18n6/state-handling7/screenshot-workflow

The AI reads the skill file, loads the instructions, and begins the workflow. You can pass additional context inline:

1/component-builder build a Tooltip atom2/security audit the Link component3/doc-generator generate docs for Button

Skills

Component Builder (/component-builder)

Generates a complete, production-grade React component for the Geeklego design system — five source files plus CSS token entries — in a single session.

When to use: Building a new atom, molecule, or organism from scratch.

What it produces: Component TSX, types file, stories file, README, and token additions to geeklego.css. All three phases must complete: Plan (atomic decomposition + dependency tree), Build (tokens co-developed with code), and Verify (checklist + fix failures).

Security (/security)

Audits and enforces XSS protection across Geeklego components.

When to use: Adding a new component that renders user-supplied URLs or external links, or running a security audit of the library.

What it covers: sanitizeHref() (strips javascript:, data:text/html, vbscript: protocols) and getSafeExternalLinkProps() (adds rel="noopener noreferrer" for external links). Components in scope: SkipLink, Item, BreadcrumbItem, NavItem, Quote, Link.

Doc Generator (/doc-generator)

Generates MDX documentation pages for Geeklego components in the geeklego-site Next.js docs.

When to use: A new component has been built and needs a documentation page under /components/<slug>.

What it produces: A .docs.mdx file with live previews, a Props table, accessibility notes, and usage examples. No import statements are needed in the MDX — all components and icons are injected automatically by the dynamic loader.

Figma Sync (/figma-sync)

Syncs the Geeklego design system or individual components from code into Figma. Code is the source of truth — this skill never pulls from Figma.

When to use: After updating design tokens or building a new component that needs a Figma counterpart.

Two modes:

  1. Sync Design System — reads geeklego.css, diffs against Figma variable collections and text styles, and applies updates
  2. Sync Component — verifies tokens exist, then builds a full Figma component with auto-layout and variable bindings

Token chain rule applies: Primitive → Semantic → Component. Aliases never skip levels.

Prerequisites: Figma MCP

This skill requires the Figma MCP server to be connected. The Figma MCP lets your AI tool read Figma files directly — without copy-pasting tokens or screenshots.

  1. Get a Figma access token — In Figma, go to Settings → Security → Personal access tokens and create a token with File content read access.

  2. Add the Figma MCP server — Run this command in your terminal (replace <YOUR_TOKEN> with the token you just created):

claude mcp add figma-developer-mcp --transport sse https://api.figma.com/v1/mcp --header "X-Figma-Token: <YOUR_TOKEN>"

Alternatively, add it manually to your MCP settings (~/.claude/settings.json):

1{2  "mcpServers": {3    "figma": {4      "type": "sse",5      "url": "https://api.figma.com/v1/mcp",6      "headers": {7        "X-Figma-Token": "<YOUR_TOKEN>"8      }9    }10  }11}
  1. Verify the connection — Run /figma-sync and paste a Figma file URL when prompted. The skill will confirm it can read the file before proceeding.

For the full Figma MCP reference, see the Figma Developer documentation.

i18n (/i18n)

Adds internationalization support to Geeklego components using a library-agnostic, prop-first architecture.

When to use: A component renders user-facing strings or formatted numbers/dates that need to support multiple locales.

Architecture: No i18n library dependency. Resolution order: hardcoded English default ← context.strings ← i18nStrings prop. RTL support uses logical CSS properties (ps-*/pe-*, ms-*/me-*, start-*/end-*). Chart formatters for BarChart and AreaChart are also in scope.

State Handling (/state-handling)

Implements and audits visual state handling (loading, disabled, error, selected/active) for Geeklego components.

When to use: A component needs loading skeletons, disabled states, error indicators, or active/selected styling — or an existing component needs a state audit.

Key patterns:

  • Loading → aria-busy="true" on root; Skeleton for organisms, Spinner for buttons
  • Disabled → getDisabledProps() + CSS tokens (--{component}-bg-disabled) + cursor-not-allowed
  • Error → aria-invalid="true" + a secondary cue (icon, border, text) beyond color alone
  • Selected/Active → aria-selected or aria-current + matching token

Screenshot Workflow (/screenshot-workflow)

Automates visual verification of Geeklego components via Playwright and Storybook.

When to use: After building or updating a component, to verify visual correctness across all variants and themes.

6-step loop (max 3 iterations):

  1. Ensure Storybook is running
  2. Discover story IDs
  3. Capture screenshots
  4. Analyze for design issues (token resolution, spacing, typography, variant distinctness, dark themes)
  5. Fix issues in source
  6. Recapture and verify

What's Next

  • Installation — Get the library set up in your project
  • Design System — Understand the token architecture the skills build on