shawn-sandy
101 verified skills133 total stars
plans-library
Builds and opens a filterable HTML gallery of all plans in the plans directory. Scans HTML plans, parses metadata, and writes index.html. Use when asked to browse plans or view plan history.
development2
planning
Creates HTML plans from objectives, enforcing verb-target filenames. Use via /plan-agent:planning to turn any objective into a structured plan.
development2
path-rules-advisor
Creates path-specific rule files in .claude/rules/. Analyzes project structure and generates scoped rules for file types or directories. Use when the user wants to add path-specific rules.
testing2
reviewing-tests
Audits tests for quality, coverage, and code alignment. Identifies gaps, redundant tests, and misaligned assertions. Use when the user asks to review, audit, or improve a test suite.
development2
react-perf-analyzer
Identifies React patterns correlated with poor INP, CLS, and Long Tasks. Produces a prioritized report mapping patterns to Core Web Vitals. Use when the user asks to analyze React performance.
development2
code-review-agent
Reviews code for bugs, security issues, and breaking changes. Produces prioritized findings on quality, vulnerabilities, and regressions. Use when asked to review code or check a PR diff.
development2
auditing-allowed-tools
Audits and fixes `allowed-tools` for SKILL.md files. Recommends or patches permissions; cross-references against session transcripts. Use when asked to audit, fix, or review tool permissions.
tools2
reviewing-agents
Audits Claude Code agent files across 5 quality dimensions. Produces a scored report and optionally generates a fix. Use when the user asks to review, audit, or score an agent definition.
development2
planning-skills
Scaffolds a new skill with SKILL.md and supporting files. Walks a structured workflow covering frontmatter, body, references, and scripts. Use when the user asks to plan or scaffold a new skill.
tools2
settings-backup
Backs up Claude Code user settings to a git repo. Commits and pushes config files unattended; routine-compatible. Use when the user asks to back up or sync their Claude Code settings.
development2
wcag-compliance-reviewer
Reviews HTML/CSS and React code for WCAG 2.2 Level AA violations. Provides targeted fixes for each accessibility issue found. Use when the user asks to check WCAG compliance or audit accessibility.
development2
branch-agent
Creates a git branch from origin/<default> with no upstream tracking. Auto-names the branch from staged or unstaged changes in the working tree. Use when the user asks to create or start a new branch.
data-ai2
plans-open
Opens the existing plans gallery without rebuilding. Opens index.html directly; run plans-library first if not yet built. Use when asked to reopen the plans gallery or browse plans without a rebuild.
development2
social-share
Social media share router — classifies content type and runs the right skill. Dispatches to the right share-* skill based on content type. Use when asked to share what you're working on.
testing2
ship
Ships changes by staging, committing, pushing, and opening a PR. Supports GitHub and GitLab in a single guided flow. Use when the user asks to ship changes or commit and create a PR.
documentation2
code-share
Generates social media copy and a dark-mode card image. Formats code changes into platform-ready posts for LinkedIn, Twitter/X, or Bluesky. Use when asked to write a post, tweet, or share a code change.
development2
plan-status
Writes lifecycle status into a plan file's frontmatter. Inspects the codebase and git history to set accurate dates and completion state. Use when the user asks to check or update a plan's status.
development2
share-blog
Creates platform-aware social copy and a dark-mode card for a blog post. Fetches OG tags, populates blog-card.html, and screenshots via Playwright. Use when asked to share a blog post on social media.
development2
share-video
Creates platform-aware social copy and a card for YouTube or Vimeo videos. Fetches oEmbed metadata and screenshots a video card via Playwright. Use when asked to share a video on social media.
testing2
deep-grill
Stress-tests plan decisions node-by-node with focused questions. Walks each decision point surfacing assumptions and weak spots. Use when the user asks to deep grill or stress-test a plan.
testing2
share-init
Generates a SOCIAL.md project sharing config by analyzing the codebase. Use when asked to set up social sharing preferences or create a SOCIAL.md file.
development2
share-explanation
Explains how any project file, component, or concept works. Reads source files and synthesizes developer-friendly principles, social copy, and a dark-mode card. Use when asked 'how does X work' or 'explain X'.
development2
implementation-plan
Generate an HTML implementation-plan document. Produces a self-contained .html plan file with steps, acceptance criteria, and metadata. Use when the user asks to create a plan document, generate an HTML plan, or write a plan file — not for general planning questions.
development2
craft-prompt
Craft-prompt: interviews users and assembles a structured AI prompt using Anthropic best-practice techniques. Use when the user runs /plan-agent:craft-prompt or asks to craft a prompt.
data-ai2
security-scrub
Scans code and diffs for secrets and sensitive data. Detects credentials, tokens, and PII to prevent leaks before sharing. Use when the user asks to check for secrets or review a diff for leaks.
development2
memory-doctor
Use when the user asks to audit, optimize, clean up, or diagnose a CLAUDE.md / project memory file, or when Claude appears to ignore project instructions. Does not cover SKILL.md files, slash commands, or general markdown.
testing2
product-plan-review-panel
Use when the user asks to review, critique, validate, or stress-test a product plan, PRD, feature proposal, UX flow, or implementation plan using a cross-functional review panel.
testing2
optimizing-descriptions
Use when the user asks to optimize, trim, or shorten SKILL.md descriptions to ≤160 chars while preserving activation accuracy.
tools2
optimizing-skill-descriptions
Use when the user asks to optimize, trim, or shorten SKILL.md descriptions to ≤160 chars while preserving activation accuracy.
tools2
plan-to-html
Deprecated alias for markdown-to-html. Delegates immediately to markdown-to-html with no additional processing. Use when the user asks to convert a plan to HTML.
development2
documenting-plans
Generates a prose reference doc from a completed plan. Inspects the codebase and git history to produce accurate, evidence-backed documentation. Use when the user asks to document a completed plan.
development2
github-code-share
Fetches a GitHub file and generates social media copy. Creates a syntax-highlighted card image for LinkedIn, Twitter/X, or Bluesky. Use when asked to share a code snippet or file from a GitHub repository.
development2
generating-agents
Scaffolds a complete Claude Code agent. Generates frontmatter, system prompt, and file structure for a new agent. Use when the user asks to create, scaffold, or generate an agent.
development2
plugin-manager
Manages plugin entries in marketplace.json. Adds, removes, bumps versions, and updates metadata for marketplace plugins. Use when the user asks to list, add, remove, or bump a plugin.
tools2
markdown-to-html
Converts a markdown file into a self-contained HTML page. Produces styled output with syntax highlighting and responsive layout. Use when the user asks to convert a markdown file or plan to HTML.
development2
video-share
Creates social media copy and a card for a YouTube or Vimeo video. Formats video content for LinkedIn, Twitter, and Bluesky with platform-appropriate messaging. Use when asked to share a video or promote a talk on LinkedIn, Twitter, or Bluesky.
development2
scan-for-shares
Scans git history or a codebase path for shareable code. Drafts social media prompts for code-share or digest generation from recent commits. Use when the user asks to find commits worth sharing, create a code digest, or generate a post.
development2
blog-share
Creates social media copy and a dark-mode card for a blog post. Formats content for LinkedIn, Twitter, and Bluesky with appropriate tone and length. Use when asked to share or post a blog post on LinkedIn, Twitter, or Bluesky.
development2
plugin-validator
Validates a plugin against the official Claude Code spec. Checks manifest fields, directory structure, and frontmatter for compliance. Use when the user asks to validate or audit a plugin.
tools2
tdd-fix
Fixes bugs via TDD with up to 10 red-green iterations. Writes a failing test then autonomously iterates until the bug is resolved. Use when the user asks to TDD-fix a bug or run a red-green cycle.
testing2
running-tests
Detects the test framework and runs scoped tests. Reports pass/fail results with output and identifies failing assertions. Use when the user asks to run tests, check if tests pass, or verify changes.
development2
building-marketplaces
Scaffolds a Claude Code plugin marketplace for a repository. Evaluates the repo structure and generates the required config files and README. Use when the user asks to build or scaffold a marketplace.
tools2
commit-agent
Stages all changes and creates a conventional commit message. Analyzes the diff and writes a descriptive, scope-correct commit. Use when the user asks to commit or save work to git.
documentation2
agentic-memory-doctor
Audits and optimizes CLAUDE.md project memory files. Checks adherence to Claude Code best practices and produces actionable fixes. Use when the user asks to audit, optimize, or diagnose a CLAUDE.md.
development2
code-testing-agent
Suggests purpose-driven tests tied to actual behavior. Writes test files covering untested paths and behavior gaps in the codebase. Use when the user asks to suggest tests or find untested behavior.
development2
settings-restore
Restores Claude Code settings from a backup git repo. Pulls the latest config to ~/.claude/ with a confirmation step before overwriting. Use when the user asks to restore or import settings.
development2
project-share
Generates platform-aware social posts and dark-mode cards for a project by topic: features, bugs, changes, or release. Use when the user wants to announce features, highlight bug fixes, share what's changed, or post a release update for LinkedIn, Twitter/X, or Bluesky.
testing2
plugin-creator
Scaffolds a complete Claude Code plugin from scratch. Generates manifest, commands, skills, and agents for selected component types. Use when the user asks to create or scaffold a new plugin.
tools2
pr-agent
Pushes the branch and creates a pull request. Supports GitHub and GitLab via gh and glab with auto-filled title and body. Use when the user asks to create a PR or open a pull request.
data-ai2
ship-autonomous
Runs the full ship pipeline with CI polling and bounded autofix. Chains commit, PR, CI poll, and autofix in one supervised flow. Use when the user asks to autonomously ship or watch CI.
testing2
share-code
Generates platform-aware social copy and a dark-mode card image for code changes. Detects from git, picks a template, and screenshots via Playwright. Use when asked to post or share a code change.
development2
create-issue
Drafts and opens a GitHub or GitLab issue from any context source. Detects host from git remote and confirms before creating. Use when the user asks to file, open, or create an issue or ticket.
tools2
code-simplifier
Analyzes code for smells and complexity. Creates a prioritized refactoring plan targeting the worst offenders. Use when the user asks to simplify code, reduce complexity, or refactor.
development2
finalize-plan
Marks an HTML plan as completed. Inspects codebase evidence, confirms with the user, and ticks every acceptance-criteria checkbox. Use via /plan-agent:finalize-plan.
development2
plan-review-agents
Runs a six-role Agent Team to review product plans in place. Covers PM, Dev, UX, Frontend, A11y, and Security on PRDs and proposals. Use when the user asks to review or improve a product plan.
development2
media-library
Builds and opens a filterable HTML gallery of saved social cards. Scans docs/media/social/ and generates a filterable index page. Use when asked to browse the media library or view saved posts.
development2
reviewing-skills
Scores SKILL.md files across 5 quality dimensions. Audits against Anthropic's authoring best practices and optionally generates a fix. Use when the user asks to review, audit, or score a skill.
testing2
share-session
Generates a session recap card. Reads session JSONL and git history to produce a narrative plus highlights card. Use when asked to share a session recap or what you worked on today.
tools2
plan-interview
Stress-tests implementation plans through structured interviews. Surfaces gaps, risks, and assumptions via targeted questions. Use when the user asks to stress-test or validate a technical plan.
testing2
share-selection
Turns selected or pasted code into a platform-aware social card. Scrubs, picks a template, and screenshots via Playwright. Use when asked to share, post, or tweet highlighted or pasted code.
development2
share-scan
Scans git history or a codebase path for shareable code. Drafts social media prompts for share-code or digest generation. Use when the user asks to find commits worth sharing or create a digest.
development2
optimizing-skill-frontmatter
Optimizes SKILL.md frontmatter fields. Rewrites descriptions to three-part format (≤200 chars) and tunes disable-model-invocation. Use when the user asks to optimize SKILL.md frontmatter.
development2
share-github
Fetches a GitHub file and generates a syntax-highlighted social card with copy. Scrubs, fills snippet-card.html, and screenshots via Playwright. Use when asked to share a code snippet from GitHub.
development2
share-project
Generates social posts and dark-mode cards for project updates. Reads git, CHANGELOG, and README then screenshots via Playwright. Use when announcing features, bugs, or releases on social media.
testing2
tdd-loop
Implements features via TDD with up to 20 red-green-refactor rounds. Writes failing tests first, then iterates until all pass. Use when the user asks to TDD a new feature or write tests first.
development2
path-rules-advisor
Use when the user wants to create path-specific rules, add rules for specific file types or directories, organize Claude rules by file type, or check whether the current project needs path-specific rules in .claude/rules/.
testing1
md-optimizer
Use when the user asks to audit, optimize, review, clean up, or improve a CLAUDE.md file. Also use when Claude is ignoring instructions, behaving inconsistently, or the CLAUDE.md appears bloated or overloaded. Does not cover SKILL.md files, plugin commands, or other markdown files.
tools1
validate-plugin
Validate a plugin directory's structure before committing. Checks required files, version conventions, homepage URL format, and marketplace.json registration. Invoke as /validate-plugin <plugin-name>.
tools1
component-link
Use when the user asks to generate, create, or scaffold a Link — accessible anchor with external/new-tab detection, aria-label injection, and current-page indication.
tools
component-icon
Use when the user asks to generate, create, or scaffold an Icon — accessible SVG icon wrapper with aria-hidden/aria-label toggle, size variants, and decorative/semantic modes.
content-media
component-img
Use when the user asks to generate, create, or scaffold an Img — accessible image component with required alt, lazy-loading, aspect-ratio containment, and decorative mode.
data-ai
component-button
Use when the user asks to generate, create, or scaffold a Button — accessible TSX or HTML+JS, with primary/secondary/destructive variants and a11y.
development
component-checkbox
Use when the user asks to generate, create, or scaffold a Checkbox — accessible checkbox with indeterminate state, aria-checked, custom indicator, and Input dependency.
testing
component-alert
Use when the user asks to generate, create, or scaffold an Alert — accessible status/error/info/warning notification with ARIA live regions and icon support.
tools
component-card
Use when the user asks to generate, create, or scaffold a Card — accessible content container with header/body/footer slots and interactive variant support.
data-ai
component-field
Use when the user asks to generate, create, or scaffold a Field — accessible form field wrapper with label, hint, and error message association via aria-describedby.
testing
component-dialog
Use when the user asks to generate, create, or scaffold a Dialog — accessible modal dialog with focus trap, aria-modal, return-focus on close, and Button dependency.
tools
component-icon-button
Use when the user asks to generate, create, or scaffold an IconButton — accessible icon-only button with required aria-label, tooltip fallback, and Button dependency.
tools
component-popover
Use when the user asks to generate, create, or scaffold a Popover — accessible tooltip/popover using the Popover API with focus trap, aria-expanded, and light-dismiss.
tools
component-table
Use when the user asks to generate, create, or scaffold a Table — accessible data table with caption, scope headers, responsive scroll wrapper, and sortable column support.
data-ai
kit-core
Internal orchestrator for /kit-create, /kit-list, /kit-sync, /kit-update and Form/HTML/Style-Tune modes. Per-component generation lives in component-<name> skills; do not auto-trigger for component requests.
development
fpkit-developer
Guides development of applications built with @fpkit/acss React components. Use when composing custom components from fpkit primitives, validating or customizing CSS variables, extending fpkit components with new behavior, or ensuring WCAG accessibility compliance in fpkit-based UIs. Not for developing the @fpkit/acss library itself — use fpkit-component-builder for that.
development
plugins/acss-kit-builder/skills/acss-kit-builder
# SKILL: acss-kit-builder Generate fpkit-style React components directly into a developer's project. No `@fpkit/acss` npm package required. Only React + sass needed. ## Purpose This skill generates self-contained, production-quality React components inspired by fpkit patterns. The developer owns the generated code and can freely modify it. Components use local imports — never `@fpkit/acss`. ## Prerequisites - React + TypeScript project - `sass` or `sass-embedded` in `devDependencies` ---
tools
acss-app-builder
Scaffold React apps with the @fpkit/acss design system — layouts, pages, themes, forms, and common UI patterns. Use when the developer wants to bootstrap a Vite+React+TS app, generate an app shell, stamp a page template, set up a theme, build a form from a schema, or insert a common pattern like a data table or empty state. Also handles composition and extension of fpkit components (absorbs the deprecated fpkit-developer workflow). Works with either the @fpkit/acss npm package or components generated by the companion acss-kit-builder plugin; prefers generated source on tie.
tools
prompt-book
Display the bundled prompt book — copy-paste prompts mapped to every slash command in acss-kit. Use when the user runs /prompt-book.
development
css-to-class
Use when the developer wants to extract CSS utility classes from an HTML element into a single named class — collapsing utility soup into one semantic selector.
tools
components-html
Use when the user asks for static HTML component snippets (plus optional vanilla JS) for fpkit-style acss-kit components in non-React projects.
development
component-creator
Use when the user asks to create or scaffold a UI component from a natural-language description — any acss-kit component with a dedicated reference doc.
development
component-form
Use when the user asks to create, scaffold, or generate a form component — signup, contact, login, or any accessible form layout with validation.
tools
styles
Generate and update CSS themes for fpkit/acss projects — OKLCH light/dark palettes, brand presets, theme role edits, and token extraction from images or Figma.
development
utilities
[Deprecated] This skill has moved to acss-kit v1.0.0. Install acss-kit and use /utility-add, /utility-bridge, /utility-list, /utility-tune instead.
tools
kit-sync
Use when the user asks to bulk-install all acss-kit components and themes (/kit-sync) or re-copy unmodified components after a plugin update (/kit-update).
tools
components
Use when the user asks to generate, create, or scaffold fpkit-style accessible components (TSX + SCSS for React, or HTML + SCSS + JS for static/non-React projects). No @fpkit/acss required.
development
style-tune
Use when the user wants to adjust the visual feel of a component or theme role — 'warmer button', 'softer card', 'bolder primary', 'calmer alert'.
tools
inline-style-to-class
Use when the developer wants to convert an inline style attribute, JSX style object, or <style> block into a named CSS class appended to the project stylesheet. Replaces hard-coded colors, units, and values with CSS variables — reusing an existing variable when one matches and creating a new one when none does.
development
setup
Use when the user runs /setup or asks to set up or bootstrap a project for acss-kit — installs sass, writes config, and optionally seeds a starter theme.
development
utilities
Use when the developer wants Tailwind-style atomic CSS utility classes for fpkit/acss — add, list, tune spacing/breakpoints, or regenerate the token-bridge.
tools
component-input
Use when the user asks to generate, create, or scaffold an Input — accessible text/number/email input with aria-invalid, error state, and controlled/uncontrolled patterns.
data-ai
create-utilities
Use when the developer wants to create utility classes from a plain-language visual description — turning intent like "centered flex row with padding" into a ready-to-use class string.
tools
component-nav
Use when the user asks to generate, create, or scaffold a Nav — accessible navigation landmark with aria-label, current-page link marking, and horizontal/vertical layout.
tools
component-list
Use when the user asks to generate, create, or scaffold a List — accessible ordered/unordered list with role="list" reset, item slots, and inline/stacked layout variants.
tools