Skip to main content
EVOKORE// SKILLS / DEVELOPER_TOOLS
Sign in
Workspace
EVOKORE-MCPmarkdownsha 022F6F0F0CA7

DEVELOPER_TOOLS

documentation

📂 Category: DEVELOPER TOOLS

This section details the extensive use cases and training materials for the DEVELOPER TOOLS domain.

🛠️ Skill: artifacts-builder

Description: Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

🧠 Core Directives & Framework

No specific directives found.

🎯 Primary Use Cases

  1. Direct Execution: When you need to immediately apply the artifacts-builder workflow to the current task.
  2. Consultation: When asking the AI to review your existing architecture against the principles defined in artifacts-builder.
  3. Orchestration: As part of a larger multi-agent sequence where artifacts-builder handles a specific specialized sub-task.

💡 Training & Invocation Examples

To trigger this skill in your AI assistant, use explicit phrasing:

"Adopt the artifacts-builder workflow to accomplish this task." "Please load the artifacts-builder skill and evaluate my code." "Use the search_skills tool to find the exact instructions for artifacts-builder."

🛠️ Skill: changelog-generator

Description: Automatically creates user-facing changelogs from git commits by analyzing commit history, categorizing changes, and transforming technical commits into clear, customer-friendly release notes. Turns hours of manual changelog writing into minutes of automated generation.

🧠 Core Directives & Framework

No specific directives found.

🎯 Primary Use Cases

  1. Direct Execution: When you need to immediately apply the changelog-generator workflow to the current task.
  2. Consultation: When asking the AI to review your existing architecture against the principles defined in changelog-generator.
  3. Orchestration: As part of a larger multi-agent sequence where changelog-generator handles a specific specialized sub-task.

💡 Training & Invocation Examples

To trigger this skill in your AI assistant, use explicit phrasing:

"Adopt the changelog-generator workflow to accomplish this task." "Please load the changelog-generator skill and evaluate my code." "Use the search_skills tool to find the exact instructions for changelog-generator."

🛠️ Skill: developer-growth-analysis

Description: Analyzes your recent Claude Code chat history to identify coding patterns, development gaps, and areas for improvement, curates relevant learning resources from HackerNews, and automatically sends a personalized growth report to your Slack DMs.

🧠 Core Directives & Framework

No specific directives found.

🎯 Primary Use Cases

  1. Direct Execution: When you need to immediately apply the developer-growth-analysis workflow to the current task.
  2. Consultation: When asking the AI to review your existing architecture against the principles defined in developer-growth-analysis.
  3. Orchestration: As part of a larger multi-agent sequence where developer-growth-analysis handles a specific specialized sub-task.

💡 Training & Invocation Examples

To trigger this skill in your AI assistant, use explicit phrasing:

"Adopt the developer-growth-analysis workflow to accomplish this task." "Please load the developer-growth-analysis skill and evaluate my code." "Use the search_skills tool to find the exact instructions for developer-growth-analysis."

🛠️ Skill: frontend-design

Description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

🧠 Core Directives & Framework

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.

Design Thinking

Before coding, understand the context and commit to a BOLD aesthetic direction:

  • Purpose: What problem does this interface solve? Who uses it?
  • Tone: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
  • Constraints: Technical requirements (framework, performance, accessibility).
  • Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?

CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.

Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:

  • Production-grade and functional
  • Visually striking and memorable
  • Cohesive with a clear aesthetic point-of-view
  • Meticulously refined in every detail

Frontend Aesthetics Guidelines

Focus on:

  • Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
  • Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
  • Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
  • Spatial Composition: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
  • Backgrounds & Visual Details: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.

NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.

Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.

IMPORTANT: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.

Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.

🎯 Primary Use Cases

  1. Direct Execution: When you need to immediately apply the frontend-design workflow to the current task.
  2. Consultation: When asking the AI to review your existing architecture against the principles defined in frontend-design.
  3. Orchestration: As part of a larger multi-agent sequence where frontend-design handles a specific specialized sub-task.

💡 Training & Invocation Examples

To trigger this skill in your AI assistant, use explicit phrasing:

"Adopt the frontend-design workflow to accomplish this task." "Please load the frontend-design skill and evaluate my code." "Use the search_skills tool to find the exact instructions for frontend-design."

🛠️ Skill: mcp-builder

Description: Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).

🧠 Core Directives & Framework

No specific directives found.

🎯 Primary Use Cases

  1. Direct Execution: When you need to immediately apply the mcp-builder workflow to the current task.
  2. Consultation: When asking the AI to review your existing architecture against the principles defined in mcp-builder.
  3. Orchestration: As part of a larger multi-agent sequence where mcp-builder handles a specific specialized sub-task.

💡 Training & Invocation Examples

To trigger this skill in your AI assistant, use explicit phrasing:

"Adopt the mcp-builder workflow to accomplish this task." "Please load the mcp-builder skill and evaluate my code." "Use the search_skills tool to find the exact instructions for mcp-builder."

🛠️ Skill: refly

Description: Base skill for Refly ecosystem: creates, discovers, and runs domain-specific skills bound to workflows. Routes user intent to matching domain skills via symlinks, delegates execution to Refly backend. Use when user asks to: create skills, run workflows, automate multi-step tasks, or manage pipelines. Triggers: refly, skill, workflow, run skill, create skill, automation, pipeline. Requires: @refly/cli installed and authenticated.

🧠 Core Directives & Framework

No specific directives found.

🎯 Primary Use Cases

  1. Direct Execution: When you need to immediately apply the refly workflow to the current task.
  2. Consultation: When asking the AI to review your existing architecture against the principles defined in refly.
  3. Orchestration: As part of a larger multi-agent sequence where refly handles a specific specialized sub-task.

💡 Training & Invocation Examples

To trigger this skill in your AI assistant, use explicit phrasing:

"Adopt the refly workflow to accomplish this task." "Please load the refly skill and evaluate my code." "Use the search_skills tool to find the exact instructions for refly."

🛠️ Skill: skill-creator

Description: Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.

🧠 Core Directives & Framework

No specific directives found.

🎯 Primary Use Cases

  1. Direct Execution: When you need to immediately apply the skill-creator workflow to the current task.
  2. Consultation: When asking the AI to review your existing architecture against the principles defined in skill-creator.
  3. Orchestration: As part of a larger multi-agent sequence where skill-creator handles a specific specialized sub-task.

💡 Training & Invocation Examples

To trigger this skill in your AI assistant, use explicit phrasing:

"Adopt the skill-creator workflow to accomplish this task." "Please load the skill-creator skill and evaluate my code." "Use the search_skills tool to find the exact instructions for skill-creator."

🛠️ Skill: webapp-testing

Description: Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.

🧠 Core Directives & Framework

No specific directives found.

🎯 Primary Use Cases

  1. Direct Execution: When you need to immediately apply the webapp-testing workflow to the current task.
  2. Consultation: When asking the AI to review your existing architecture against the principles defined in webapp-testing.
  3. Orchestration: As part of a larger multi-agent sequence where webapp-testing handles a specific specialized sub-task.

💡 Training & Invocation Examples

To trigger this skill in your AI assistant, use explicit phrasing:

"Adopt the webapp-testing workflow to accomplish this task." "Please load the webapp-testing skill and evaluate my code." "Use the search_skills tool to find the exact instructions for webapp-testing."