Claude Skills by Giorris

Ready-to-use Claude skills for design workflows and spark creativity with AI.

📢 Latest Release

Version 1.8.0 - Figma Component Generator improvements

Updated skill: figma-component-generator v1.0.0 → v1.1.0 - Smarter classification, dependency resolution, and overlay handling:

• New component classification step (Visual / Layout wrapper / Compositional) with a clarity checkpoint for layout wrappers
• Compositional components now reuse existing component sets via createInstance() instead of redrawing them as raw frames
• Optional figma-map.json lookup table for fast direct-ID dependency resolution (with findAll fallback)
• New rule: floating-overlays.md — detect popovers/dropdowns/tooltips and split into trigger + floating component sets
• New rule: atomic-dependencies.md — classification + variant-selection heuristics for composed components
• Slots split into Pattern A (instance-filled) vs. Pattern B (frame-filled), plus updated slot convert caveats
• Sharper pattern detection table and a new Dependencies-resolved line in the generation report
• Requires figma-cli

Updating Skills:

# Update specific skill
npx giorris-claude-skills install ai-component-metadata --force

# Update all skills
npx giorris-claude-skills --all --force

Use the --force flag if skills don't automatically update to the latest version as skill version was added recently.

🚀 Quick Start

NPX Installation (Recommended)

The easiest way to install skills is using npx:

# Interactive mode - select skills from a menu
npx giorris-claude-skills

# Install specific skill
npx giorris-claude-skills install ai-component-metadata

# Install all skills at once
npx giorris-claude-skills --all

Via Claude Code Marketplace

# Add the marketplace
/plugin marketplace add github:cris-achiardi/claude-skills

# Install by name from marketplace
/plugin install ai-component-metadata@giorris-skills

# Or install directly from GitHub
/plugin install github:cris-achiardi/claude-skills/skills/ai-component-metadata

📦 Available Skills

AI Component Metadata

Category: Design System Version: 1.0.0

Generate AI-ready metadata for design system components to enable intelligent UI generation. Analyzes component structure and generates structured metadata that helps AI understand when and how to use components correctly.

Install:

npx giorris-claude-skills install ai-component-metadata

Use Cases:

• Building AI-consumable design systems
• Enabling intelligent UI generation
• Creating component metadata for Storybook
• Integrating with Figma MCP for complete context

Learn more: View Documentation

AI DS Composer

Category: Design System Version: 1.0.0

Strategic guide for consuming design system metadata to compose components intelligently. Teaches AI to reason through metadata hierarchically, prioritize component reuse, apply selection criteria, and flag gaps when existing components don't fit requirements.

Install:

/plugin install ai-ds-composer@giorris-skills

Use Cases:

• Intelligent UI component selection and composition
• Design system component reasoning and reuse
• Understanding hierarchical metadata structures
• Applying anti-pattern rules and selection criteria
• Flagging when custom components are needed

Learn more: View Documentation

Codebase Index

Category: Development Tools Version: 1.2.0

Automatically generate relationship and dependency maps for any component-based codebase (React, Vue, Svelte, Astro, Next.js, Angular, Solid). Auto-detects framework and supports TOON format for 30-60% token savings. Creates comprehensive JSON/TOON files mapping component usage, imports, npm dependencies, utilities, CSS, and data queries. Now with React component support for hybrid Astro projects and improved Windows compatibility.

Install:

npx giorris-claude-skills install codebase-index

Use Cases:

• Indexing codebases for AI context
• Mapping component relationships and dependencies
• Documenting architecture automatically
• Understanding unfamiliar projects quickly
• Reducing token usage in AI conversations (30-60% with TOON format)
• Generating up-to-date codebase documentation

Learn more: View Documentation

Figma Variables Generator

Category: Design System Version: 1.1.0

Generate JSON files for creating Figma variable collections from text descriptions or design token data. Converts design tokens (colors, spacing, typography, etc.) into Figma variables format with support for multiple modes (Light/Dark), code syntax definitions, variable references/aliases, and hierarchical organization. Now with update preservation and JSON reformatting capabilities.

✨ New in v1.1.0:

• Fixed variable types to match Figma's actual API (4 types only: color, number, string, boolean)
• Update existing collections while preserving names and structure
• Reformat messy plugin-generated JSON for better readability
• Enhanced documentation with detailed examples

Install:

npx giorris-claude-skills install figma-variables-generator

Use Cases:

• Creating Figma variable collections from design tokens
• Converting existing design systems to Figma variables
• Updating existing variable collections without creating duplicates
• Reformatting messy plugin-generated JSON for readability
• Generating multi-mode color schemes (Light/Dark themes)
• Setting up design token systems with proper references
• Converting CSS/code tokens to Figma format
• Automating design system setup in Figma

Learn more: View Documentation

Figma Component Generator

Category: Design System Version: 1.1.0

Generate Figma component sets from source code using the figma-cli tool. Reads React/CSS/metadata source files and produces properly structured Figma components with variants, variable bindings, icon instances, and text styles.

Key Features:

• Automatic CSS token to Figma variable mapping
• Component classification (Visual / Layout wrapper / Compositional) with a clarity checkpoint for layout wrappers
• Atomic dependency resolution: reuse existing component sets via createInstance() instead of redrawing as raw frames
• Optional figma-map.json lookup table for fast direct-ID dependency resolution
• Floating overlay handling for popovers, dropdowns, tooltips (trigger + overlay split)
• Slots split into Pattern A (instance-filled) and Pattern B (frame-filled)
• Lucide icon library integration with per-variant recoloring
• Figma text style application (not hardcoded fonts)
• Modular rules for nested components, slots, sizing modes, atomic dependencies, floating overlays
• Project-specific configuration via template reference files

Install:

npx giorris-claude-skills install figma-component-generator

Use Cases:

• Generating Figma components from React/CSS source code
• Keeping Figma libraries in sync with code-based design systems
• Batch-creating component variants with proper variable bindings
• Building nested component architectures (sub-components + slots)

Requires: figma-cli installed locally

Learn more: View Documentation

Spec Ideation Framework

Category: Workflow Version: 1.0.0

Structured framework for working with AI to transform vague ideas into clear, documented specifications through conscious decision-making. Uses a three-phase process: Expansion, Contraction, and Documentation.

Install:

npx giorris-claude-skills install spec-ideation

Use Cases:

• Planning complex features or projects
• Making design decisions with AI assistance
• Creating specifications from rough ideas
• Structured problem-solving and ideation

Learn more: View Documentation

Crazy 8's (Solo Version)

Category: Workflow Version: 1.0.0

Solo rapid ideation method based on Google Design Sprint Crazy 8's exercise. Generates 8 distinct solution ideas in 8 minutes through rapid-fire ideation or sketch documentation. Includes creativity warm-up questions, built-in timer, optional creative constraints, and generates visual HTML/CSS prototypes.

Install:

npx giorris-claude-skills install crazy-8s

Use Cases:

• Rapid solo ideation for design challenges
• Exploring multiple solution directions quickly
• Pushing beyond first obvious ideas
• Generating variety before converging on solutions

Learn more: View Documentation

Problem Mapping

Category: Workflow Version: 1.0.0

Foundational problem framing for design sprints and product strategy. Based on Google Design Sprint "Understand" phase methodology. Creates structured problem map documents that establish shared understanding before ideation - defining problem statements, identifying users/stakeholders, setting success criteria, and documenting constraints.

Install:

npx giorris-claude-skills install problem-mapping

Use Cases:

• Framing design challenges before solution generation
• Establishing shared team understanding
• Documenting goals, constraints, and assumptions
• Foundation for HMW exercises and design sprints

Learn more: View Documentation

🌐 Browse Online

Visit giorris.dev/skills to:

• Browse skills with code previews
• View detailed documentation
• See usage examples
• Copy installation commands

🛠️ What are Claude Code Skills?

Skills are reusable prompts and workflows that extend Claude Code's capabilities. They help you:

• Standardize common workflows
• Share best practices across projects
• Enable specialized AI behaviors
• Build domain-specific AI assistants

Learn more about Claude Code Skills.

📖 Skill Structure

Each skill in this marketplace follows a consistent structure:

skills/
└── skill-name/
    ├── SKILL.md           # Main skill documentation
    ├── LICENSE.txt        # MIT License
    ├── references/        # Additional documentation
    │   └── EXAMPLES.md
    ├── assets/            # Templates and examples
    │   └── template.tsx
    └── scripts/           # Optional utility scripts
        └── helper.py

🤝 Contributing

While these skills are primarily maintained by Cristian Morales, suggestions and improvements are welcome!

Reporting Issues

Found a bug or have a suggestion? Open an issue

Proposing Improvements

Have an idea to enhance a skill? Feel free to:

1. Fork the repository
2. Make your improvements
3. Submit a pull request with a clear description

📜 License

All skills in this marketplace are licensed under the MIT License. See individual skill directories for specific license files.

Copyright © 2025 Cristian Morales

🔗 Links

• Website: giorris.dev
• Skills Catalog: giorris.dev/skills
• GitHub: @cris-achiardi
• LinkedIn: Cristian Morales Achiardi
• YouTube: @giongiorris

💬 Support

• Documentation: giorris.dev/skills
• Issues: GitHub Issues
• Contact: [email protected]

⭐ Found this useful? Give us a heart to support the project!