Skill Creator
A meta-skill that helps you create new skills for your portfolio website project.
Trigger Phrases
This skill activates when the user wants to create a new skill:
- "create a new skill"
- "make a skill"
- "generate a skill"
- "help me create a skill"
- "add a new skill"
Instructions
When this skill is invoked, follow these steps to help the user create a new skill:
Step 1: Gather Skill Information
Use the AskUserQuestion tool to gather the following information:
- Skill Name: Ask "What should we name this skill?"
- Explain that the name should be lowercase with hyphens (e.g., "project-creator", "responsive-nav")
- Skill Purpose: Ask "What will this skill do?"
- Get a clear description of what the skill accomplishes
- Examples: "Create a new project card", "Generate a responsive navigation", "Add a contact form section"
- Trigger Phrases: Ask "What phrases should trigger this skill?"
- Request 3-5 trigger phrases that should activate the skill
- Examples: "create project card", "add project", "new project"
Step 2: Generate the SKILL.md File
Once you have all the information, create the skill directory and SKILL.md file:
- Create directory:
.claude/skills/{skill-name}/ - Create file:
.claude/skills/{skill-name}/SKILL.md
Step 3: SKILL.md Template
Use this template structure for the generated SKILL.md:
# {Skill Name}
{Brief description of what this skill does}
## Trigger Phrases
This skill activates when the user wants to {action}:
- "{trigger phrase 1}"
- "{trigger phrase 2}"
- "{trigger phrase 3}"
- "{trigger phrase 4}"
- "{trigger phrase 5}"
## Instructions
When this skill is invoked, follow these steps:
### Step 1: {First Major Step}
{Detailed instructions for this step}
1. {Substep 1}
2. {Substep 2}
3. {Substep 3}
### Step 2: {Second Major Step}
{Detailed instructions for this step}
### Step 3: {Third Major Step}
{Detailed instructions for this step}
## File Structure
If this skill creates files, specify the structure:
{directory}/ ├── {file1} ├── {file2} └── {file3}
## Code Templates
If applicable, include code templates or patterns:
<!-- Example HTML structure -->
/ Example CSS styles /
// Example JavaScript code
## Best Practices
- {Best practice 1}
- {Best practice 2}
- {Best practice 3}
## Notes
- {Important note 1}
- {Important note 2}
Step 4: Customize the Template
Based on the user's responses:
- Replace placeholders with the actual skill information
- Add specific instructions relevant to the skill's purpose
- Include code templates if the skill involves generating code
- Add file structure if the skill creates multiple files
- Include best practices specific to this skill's domain
Step 5: Create the Skill
- Use the Bash tool to create the skill directory
- Use the Write tool to create the SKILL.md file with the generated content
- Confirm the skill has been created successfully
Step 6: Provide Usage Instructions
After creating the skill, tell the user:
- How to activate the skill (the trigger phrases)
- Where the skill file is located
- How to edit or customize it further if needed
Example Interaction
User: "Create a new skill"
Assistant:
- Asks: "What should we name this skill?"
- Asks: "What will this skill do?"
- Asks: "What phrases should trigger this skill?"
- Creates the directory structure
- Generates the SKILL.md file
- Confirms creation and explains how to use it
Tips for Creating Good Skills
- Be specific: Skills should have a clear, focused purpose
- Use clear triggers: Choose trigger phrases that are natural and intuitive
- Provide context: Include enough detail in instructions for consistent execution
- Include examples: Show code templates, file structures, and patterns
- Think step-by-step: Break down complex tasks into manageable steps
- Reference the design system: For portfolio-related skills, reference colors, spacing, and component patterns from CLAUDE.md
Integration with Portfolio Project
When creating skills for this portfolio website:
- Reference the design system in CLAUDE.md
- Use the established color palette (blue primary, purple secondary)
- Follow the 8px spacing scale
- Maintain the minimal, modern aesthetic
- Ensure dark mode compatibility
- Use vanilla JavaScript (no frameworks)
- Follow accessibility best practices
Notes
- Skills are stored in
.claude/skills/{skill-name}/SKILL.md - Each skill should be self-contained and focused on one task
- Skills can reference other skills if needed
- Keep instructions clear and actionable
- Test the skill after creation to ensure it works as expected