Skip to content

skills

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

skills

README.md

Personal Claude Code Skills

This directory contains reusable skills for Flutter/Dart development. Skills are automatically loaded by Claude Code when relevant to the task.

Installed Skills

1. watch_it-expert

Description: Expert guidance on watch_it reactive state management patterns, lifecycle functions (callOnce, createOnce, watchValue), performance optimization, and integration with get_it.

When I use it: Working with watch_it widgets, reactive state, or lifecycle management.

Topics covered:

  • WatchingWidget vs WatchingStatefulWidget
  • Lifecycle functions (callOnce, createOnce, watchValue)
  • registerHandler for side effects
  • Performance optimization patterns
  • Integration with get_it

2. command_it-expert

Description: Expert guidance on command_it command pattern for async operations, error handling strategies, error filters, reactive loading states, and integration with watch_it.

When I use it: Implementing commands, handling errors, or managing async state.

Topics covered:

  • Command types and creation
  • Error filters (local, global, predicates)
  • Command properties (value, isExecuting, errors)
  • Success/error handlers
  • Best practices and anti-patterns

3. auto_route-expert

Description: Expert guidance on auto_route declarative routing, navigation, route generation, guards, nested navigation, deep linking, and tab navigation patterns.

When I use it: Implementing navigation, routes, or routing architecture.

Topics covered:

  • Router setup and configuration
  • Route annotations and parameters
  • Navigation methods (push, pop, replace)
  • Nested navigation with AutoTabsRouter
  • Route guards for authentication
  • Deep linking and URL handling

4. flutter-performance

Description: Expert guidance on Flutter performance optimization including widget rebuilds, memory management, rendering optimization, list performance, image caching, and profiling tools.

When I use it: Diagnosing performance issues or optimizing Flutter apps.

Topics covered:

  • Widget rebuild optimization
  • const constructors and extraction
  • List performance (ListView.builder)
  • Image optimization and caching
  • Memory management
  • Animation performance
  • Profiling with DevTools

5. figma-to-flutter

Description: Expert guidance on extracting design assets from Figma, using Figma MCP server for SVG exports, optimizing SVG code, design token mapping, and implementing Figma designs in Flutter.

When I use it: Working with Figma designs or exporting assets.

Topics covered:

  • Figma MCP server workflow
  • SVG asset extraction (get_metadata → get_design_context → download)
  • SVG cleaning and optimization
  • Design token mapping
  • Component extraction
  • Common workflows and best practices

How Skills Work

Skills are model-invoked - I (Claude) automatically decide when to use them based on your request and the skill's description. You don't need to explicitly invoke them.

Example Usage

When you ask:

  • "How should I handle errors in this command?" → I'll use command_it-expert
  • "This list is scrolling slowly" → I'll use flutter-performance
  • "Export this icon from Figma" → I'll use figma-to-flutter
  • "How do I watch this value reactively?" → I'll use watch_it-expert
  • "Set up navigation for this app" → I'll use auto_route-expert

Installation Verified

Skills are located in: ~/.claude/skills/

Each skill has its own directory with a SKILL.md file:

~/.claude/skills/
├── watch-it-expert/
│   └── SKILL.md
├── command-it-expert/
│   └── SKILL.md
├── auto-route-expert/
│   └── SKILL.md
├── flutter-performance/
│   └── SKILL.md
└── figma-to-flutter/
    └── SKILL.md

Activating Skills

To activate these skills:

  1. Restart Claude Code - Skills are loaded at startup
  2. Skills will automatically activate when relevant to your task
  3. No manual invocation needed - I'll use them when appropriate

Testing Skills

Try asking questions like:

  • "How do I optimize this ListView performance?"
  • "What's the best way to handle command errors?"
  • "Help me set up nested tab navigation"
  • "How should I use callOnce vs createOnce?"
  • "Extract this SVG icon from Figma"

Updating Skills

To update a skill:

  1. Edit the SKILL.md file in the skill directory
  2. Restart Claude Code to reload the changes

Adding New Skills

To add a new skill:

mkdir -p ~/.claude/skills/my-new-skill
cd ~/.claude/skills/my-new-skill
touch SKILL.md

Then edit SKILL.md with YAML frontmatter:

---
name: my-new-skill
description: Brief description (max 1024 chars) - critical for discovery
---

# Skill Content

[Your detailed skill instructions here]

Package-Specific vs Project-Specific

These personal skills (in ~/.claude/skills/) are for:

  • ✅ Generic package knowledge (watch_it, command_it, auto_route)
  • ✅ Reusable across multiple projects
  • ✅ Framework/library best practices

Project docs (in project .claude/ or markdown files) are for:

  • ✅ WatchCrunch-specific patterns
  • ✅ Custom widget standards
  • ✅ Team conventions
  • ✅ Project architecture

Resources

Last Updated: 2025-01-08 Skills Version: 1.0.0