shawn-sandy
126 verified skills181 total stars
session-artifact
Publishes a session recap as a claude.ai artifact. Extracts transcript turns into a Summary, Decisions, and Learnings recap, scrubs it, then publishes. Use when asked to share a session recap.
testing2
planning
Creates HTML plans from objectives, enforcing verb-target filenames. Use via /plan-agent:planning to turn any objective into a structured plan.
development2
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
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
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
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
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
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
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
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
setup-sites
Scaffolds GitHub Pages publishing into any repo. Adds the deploy workflow, .nojekyll, hub, and preview script so docs/ HTML reaches a public URL. Use when asked to set up or publish GitHub Pages.
development2
merge
Checks whether the branch's PR is ready and merges it when green. Runs the readiness gate, lint, and an approval prompt. Use when the user asks "merge?" or if a PR is ready to merge.
development2
plan-status
Writes lifecycle status into a plan's frontmatter, one file or a directory. Inspects codebase and git history for accurate dates. Use when asked to check or update plan status.
development2
build-proposal
Turns a vague idea into a decision-complete proposal. Researches web and codebase, separating established facts from open decisions. Use when the user floats an idea or asks should-we.
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
write-guide
Writes developer guides on any project topic. Covers rules, tools, resources, plans, and changes for any reader. Use when the user asks to write, explain, or deep-dive a project topic as a guide.
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
review-plan
Plan review Agent Team. Reviews HTML implementation plans in parallel, synthesizes findings, and applies improvements in place. Use when the user asks to review or improve an implementation plan.
development2
prototype
Generates a runnable static-HTML prototype from a plan, idea, or design. Produces one self-contained, framework-free clickable file under docs/prototypes/. Use when asked to prototype a mockup.
tools2
export-session
Exports a Claude Code session transcript to Markdown. Converts session JSONL into readable reference material in the plans directory. Use when asked to export or archive a session.
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
sync-rules
Installs the team's shared rule files into ~/.claude/rules/. Copies the bundled plan-mode, UI, JSDoc, and review rules with per-file confirmation. Use when asked to sync team rules.
documentation2
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
diff-artifact
Publishes an annotated diff walkthrough as a claude.ai artifact. Scrubs for secrets, then builds a self-contained page with per-hunk reviewer notes. Use when asked to publish or share a diff.
development2
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
prompt-artifact
Publishes saved prompts as claude.ai artifacts. Copies raw prompt text verbatim; publishes one prompt or the whole filterable library. Use when asked to publish or share a prompt.
development2
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
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
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
share-explanation
Explains how any project file, component, or concept works. Reads source files, synthesizes principles, and generates a social card. Use when the user asks how something works or to explain it.
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
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
save-artifact
Saves an HTML Artifact page to the local artifacts inbox. Copies a local .html or fetches a claude.ai artifact URL, scrubs, then publishes. Use when asked to save or share an artifact or its URL.
development2
implementation-plan
Generates HTML implementation-plan documents. Produces a self-contained .html plan file with steps, acceptance criteria, and metadata. Use when the user asks to create or generate an HTML plan file.
development2
refine-prompt
Builds structured AI prompts using Anthropic techniques. Interviews users, classifies prompt type, and delivers a copy-pasteable prompt. Use when the user asks to refine or build a prompt.
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
artifact-to-post
Converts an HTML artifact or Markdown file into a draft post for a static site. Scopes CSS to keep interactive blocks alive and escapes prose for MDX. Use when asked to turn an artifact into a post.
development2
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
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
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
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
agentic-memory-management
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
ship-autonomous
Runs the full ship pipeline with verification, CI polling, and bounded autofix. Chains tests, preview, commit, PR, CI poll, and gated merge. Use when asked to autonomously ship or watch CI.
testing2
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
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
build
Implements a plan file that already exists. Walks its steps, ticks the spec, re-renders, and runs the completion gates. Use when asked to implement an existing plan.
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
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
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
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
share-react
Turns a React component into a social card with preview, code, and props table. Builds a static preview and screenshots react-card.html via Playwright. Use when asked to share a React component.
development2
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
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
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-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
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
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
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
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
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
plan-artifact
Publishes an implementation plan as a claude.ai artifact. Republishes to the same URL across sessions so viewers watch steps check off live. Use when asked to publish or share a plan.
testing2
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
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
finalize-plan
Marks a plan as completed. Verifies codebase evidence, ticks acceptance criteria, and re-renders the HTML; --all sweeps unmarked plans. Use via /plan-agent:finalize-plan.
development2
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
write-prompt
Builds structured AI prompts using Anthropic techniques. Interviews users, classifies prompt type, and delivers a copy-pasteable prompt. Use when the user asks to write, refine, or build a prompt.
development2
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
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
share-code
Generates social copy and a dark-mode card image for code changes. Detects changes from git, picks a template, and screenshots via Playwright. Use when asked to share a code change.
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
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
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
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
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
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
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
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-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-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
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-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-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
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
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
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
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-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-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-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
create-utilities
Use when the developer wants a utility-class string from a plain-language visual description — emits utility class names like "flex items-center p-4", not CSS; use /css instead to author a raw CSS/SCSS rule.
tools
css
Use when the developer wants to author CSS from a plain-language description — emits a raw CSS/SCSS rule or an inline style attribute, reusing the project's own custom properties. For a utility-class string instead, use create-utilities.
tools
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
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
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
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
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
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
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-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-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