cris-achiardiCommunity·7 Agent Skills Included

claude-skills

Figma component generation, design tokens, and rapid ideation

Generates Figma component sets and variable collections directly from source code and design tokens. Maps codebase component relationships and produces structured metadata for consistent design system reuse. Guides solo ideation sprints, problem framing, and spec writing to turn vague ideas into documented plans. Eliminates manual Figma setup, messy token JSON, and unstructured brainstorming sessions.

62|8

↗

npx skills add cris-achiardi/claude-skills --all -g -y

All Skills in This Repository (7)

Pure Emerald Level Indicators

📦 In Repo

cris-achiardi

codebase-index

Generate relationship and dependency maps for component-based codebases.

crazy-8s

Generate eight distinct ideas within an eight-minute timer for solo ideation.

figma-component-generator

Generate Figma component sets from TSX/CSS source files and metadata.

ai-ds-composer

Apply design-system metadata to guide UI component selection decisions.

figma-variables-generator

Generate Figma variable collection JSON files from design tokens.

ai-component-metadata

Generate AI-ready metadata TSX exports from React/TypeScript components.

problem-mapping

Frame design challenges with a structured problem map document.

Community

Intermediate

Frequently Asked Questions

FAQPage Schema

How to install claude-skills?▼

Run `npx skills add cris-achiardi/claude-skills --all -g -y` in your terminal to install all skills globally.

How to generate Figma components from code?▼

The figma-component-generator skill reads your React and CSS source files and builds matching Figma component sets with variants and variable bindings automatically.

How to convert design tokens into Figma variables?▼

The figma-variables-generator skill converts colors, spacing, and typography tokens into ready-to-import Figma variable JSON, including Light and Dark modes.

Can these skills help with design brainstorming?▼

Yes. The crazy-8s and problem-mapping skills guide you through structured ideation and problem framing based on Google Design Sprint methods.

Do I need coding experience to use these skills?▼

No. Once installed, you describe what you need in plain English and the skills handle the technical steps for you.