Agent skills that show their work.

Right now it renders a film and checks every frame

Open-source agent skills for developers and designers. Each one runs real tools, looks at what they produce, and fixes the problems before it tells you it's done.

/plugin marketplace add mayank2424/knack
/plugin install knack@knack

MIT licensed · Agent Skills format · Node 18+, no telemetry

Watch an agent use a skill

A replay of real runs. The commands, numbers and screenshots come from the skills' own output on their bundled examples.

Claude CodeClaude Coderesponsive-qa Replay of a real run

YouCheck the landing page on mobile and fix what breaks.

    375px · 12 errors

    The skills

    Every skill ships the scripts it needs and reads their output. You get evidence with the result: a contact sheet, an annotated screenshot, a report, a diff.

    Media · tuned for Claude Opus 5.5

    Motion Video

    Turns a brief, or just "go all out", into a shot list, an HTML composition and a frame-accurate video with a synthesized, cue-synced score.

    • Plans on a beat grid and scores every cut with synthesized music and sound effects
    • Reviews filmstrips and stills at every cut, and lints for collisions, tiny type and unloaded fonts
    • Renders exact frames with color-accurate encoding, optional motion blur and 4K
    1. Writestoryboard.md
    2. Bashrender.mjs --check
    3. Readfilmstrip.png
    4. Editindex.html
    5. Bashrender.mjs → mp4
    npx skills add mayank2424/knack --skill motion-video

    4 worked examplesRead the docsSource

    templates/showreel: one square through seven techniques, cut on a 124 BPM grid, with a synthesized score. Turn the sound on.
    Media

    Demo Recorder

    Scripts a flow through your running app and records a crisp clip with a smooth cursor, zoom and captions.

    • Dry-runs the flow and screenshots every step before recording
    • Suggests working selectors when a step fails
    • Builds a contact sheet of the encoded clip and warns above GitHub's 10 MB limit
    1. Bashinspect.mjs
    2. Writeflow.json
    3. Bashrecord.mjs --dry-run
    4. Readsteps.png
    5. Bashrecord.mjs → mp4
    npx skills add mayank2424/knack --skill demo-recorder

    3 worked examplesRead the docsSource

    examples/flow.json recorded against the bundled demo app: 14.8s, 890 KB MP4.
    Design

    Responsive QA

    Sweeps a page from 320px to 1920px and reports layout bugs with the element that causes them.

    • Finds sideways scroll and names the element pushing it
    • Flags clipped text, overlapping controls and tap targets under 24px
    • Re-runs after each fix and compares against the previous report
    1. Bashsweep.mjs
    2. Readcontact-sheet.png
    3. Editstyles.css
    4. Bashsweep.mjs --compare
    5. Done0 errors
    npx skills add mayank2424/knack --skill responsive-qa

    3 worked examplesRead the docsSource

    sweep.mjs at 1280px: the API endpoint overflows its card (1) and the avatar is squashed (2). Boxes match report.json.
    sweep.mjs at 1280px: the API endpoint overflows its card (1) and the avatar is squashed (2). Boxes match report.json.
    Design

    A11y Audit

    Runs axe-core and a real keyboard pass, then fixes violations in source until the page passes.

    • axe-core 4.13 against WCAG 2.2 AA, with selectors and HTML for every node
    • Tabs through the page for traps, invisible or obscured focus, hover-only menus and unreachable controls
    • Suggests the nearest passing color for every contrast failure, matching WebAIM's math
    1. Bashaudit.mjs
    2. Readreport.md
    3. Editsource files
    4. Bashaudit.mjs --fail-on serious
    5. Done0 serious
    npx skills add mayank2424/knack --skill a11y-audit

    3 worked examplesRead the docsSource

    audit.mjs on examples/inaccessible-page.html: 4 critical, 12 serious, 4 moderate. Dashed boxes come from the keyboard pass.
    audit.mjs on examples/inaccessible-page.html: 4 critical, 12 serious, 4 moderate. Dashed boxes come from the keyboard pass.
    Design

    Token Drift

    Finds colors and spacing that bypass your design tokens, maps each to the right token and fixes the safe ones.

    • Reads CSS variables, Tailwind v3 and v4, DTCG JSON, SCSS and LESS tokens, per package in monorepos
    • Matches colors by CIEDE2000 and sizes by distance to the scale
    • Fixes only exact, rendering-safe replacements and lists anything that changes with the theme
    1. Bashtokens.mjs
    2. Bashscan.mjs
    3. Readreport.md
    4. Bashscan.mjs --fix
    5. Done13% → 63%
    npx skills add mayank2424/knack --skill token-drift

    3 worked examplesRead the docsSource

    $ node scripts/scan.mjs examples/acme-dashboard
token-drift · examples/acme-dashboard/  8 files · 380 tokens from 4 sources

  Drift score   13%  11 of 83 design values use tokens

  EXACT       48  equals a token → swap in the token (41 auto-fixable)
  NEAR        10  within threshold of a token
  OFF-SCALE   14  far from every token

  Button.jsx:7   hover:bg-[#1e4fd6]     → hover:bg-brand-600         ΔE 0.41
  Modal.vue:32   oklch(0.55 0.22 263)   → var(--color-brand-500)     ΔE 0.53
  global.css:14  #2563ea                → var(--color-brand-500)     ΔE 0.13

$ node scripts/scan.mjs examples/acme-dashboard --fix
Fixed 41 values in 5 files
Drift score 13% → 63%
    Real output on the bundled example. Values that need judgment (named z-index layers, negative offsets, JS-computed styles) are listed, not changed.
    Dev

    PR Visual Diff

    Captures the pages a PR touches on both branches, diffs them and writes the Visual changes section.

    • Brings up the base branch in a throwaway worktree and never touches yours
    • Freezes time, animations, video and randomness so unchanged pages diff to 0 pixels
    • Separates moved, added and removed content from real changes, with close-ups of each region
    1. Bashaffected-pages.mjs
    2. Bashworktree-serve.mjs
    3. Bashcapture.mjs
    4. Readfocus.png
    5. Writepr-section.md
    npx skills add mayank2424/knack --skill pr-visual-diff

    3 worked examplesRead the docsSource

    focus.png from capture.mjs on examples/before and examples/after: the CTA restyle was intended, the shrunken pricing buttons were not.
    focus.png from capture.mjs on examples/before and examples/after: the CTA restyle was intended, the shrunken pricing buttons were not.

    How a Knack skill works

    A skill is a folder: a SKILL.md the agent follows, scripts it runs, and references it reads when it needs them. The scripts turn "looks done" into something the agent can check.

    1. Act

      Writes the composition, the flow file or the fix, following the skill's workflow.

    2. Measure

      Runs the bundled tool: render.mjs --check, audit.mjs, sweep.mjs, capture.mjs.

    3. Look

      Reads the evidence: filmstrip.png, annotated screenshots, report.json, compare.png.

    4. Repeat

      Fixes what the evidence shows and runs again until it's clean, then reports with the proof attached.

    skills/a11y-audit/
├── SKILL.md          workflow the agent follows
├── scripts/          audit.mjs, contrast.mjs, setup.sh
├── references/       fix recipes, manual checks
└── examples/         a broken page and its fixed twin

    Popular skills from the ecosystem

    Widely used skills from Anthropic, Vercel and the community, sorted by GitHub stars. Counts refresh on every deploy. Not affiliated with Knack.

    SkillMaintainerCategoryStarsInstall
    Superpowers

    Brainstorming, planning, TDD, systematic debugging and subagent workflows.

    		 Jesse Vincent Dev 300k
    Skills for Real Engineers

    grill-me, tdd, improve-codebase-architecture, handoff and more.

    		 Matt Pocock Dev 293k
    frontend-designOfficial

    Distinctive, production-grade UI that avoids the generic AI look.

    		 Anthropic Design 181k
    skill-creatorOfficial

    Author, evaluate and tune new skills, with benchmarking.

    		 Anthropic Dev 181k
    webapp-testingOfficial

    Test local web apps with Playwright: screenshots, logs, interactions.

    		 Anthropic Dev 181k
    mcp-builderOfficial

    Design and build high-quality MCP servers.

    		 Anthropic Dev 181k
    pdf · docx · xlsx · pptxOfficial

    Read, create and edit PDFs, Word, Excel and PowerPoint files.

    		 Anthropic Docs 181k
    ui-ux-pro-max

    Design intelligence: styles, palettes and font pairings across stacks.

    		 nextlevelbuilder Design 136k
    Production engineering skills

    API design, CI/CD, code review and other production-grade practices.

    		 Addy Osmani Dev 107k
    taste-skill

    Art direction, references and a browser check for better-looking UIs.

    		 Leonxlnx Design 97.7k
    impeccable

    A design language that makes your agent better at design.

    		 Paul Bakaus Design 81.8k
    HyperFrames

    Write HTML, render video. Includes skills for the HyperFrames CLI.

    		 HeyGen Media 64.9k
    Marketing skills

    CRO, copywriting, SEO audits and launch playbooks.

    		 Corey Haines Productivity 55.0k
    Emil Kowalski skills

    Animation craft and review from the creator of Sonner and Vaul.

    		 Emil Kowalski Design 46.6k
    agent-browser

    A fast browser automation CLI built for agents.

    		 Vercel Dev 44.1k
    find-skills

    Discover and install skills from your agent (`npx skills`).

    		 Vercel Productivity 35.2k
    React best practices & web design guidelines

    Performance rules for React/Next.js plus UI review guidelines.

    		 Vercel Dev 32.5k
    playwright-cli

    Drive Playwright from the CLI, and record or generate tests.

    		 Microsoft Dev 14.2k
    ui-skills

    Baseline UI, fixing-accessibility and DESIGN.md skills for design engineers.

    		 ibelick Design 9.8k
    better-* skills

    Typography, color, layout and accessibility refinements.

    		 Jakub Krehel Design 8.0k
    Trail of Bits security skills

    Security research, vulnerability detection and audit workflows.

    		 Trail of Bits Dev 7.6k
    Remotion skills

    Best practices for making videos in React with Remotion.

    		 Remotion Media 5.2k
    web-quality-skills

    Lighthouse, Core Web Vitals and accessibility optimization.

    		 Addy Osmani Dev 2.9k
    Supabase skills

    Supabase and Postgres best practices for agents.

    		 Supabase Dev 2.8k

    More lists: awesome-claude-skillsskills.sh leaderboardAnthropic official plugins

    Add a skill

    Knack takes skills that check their own output. If yours renders, measures or diffs something real, open a pull request and it will appear here.

    Contributing guideRequest a skill

    • A SKILL.md under 500 lines that leads with the workflow
    • Scripts with --help, pinned dependencies and clear errors
    • A small example the skill can be run against
    • A preview image made from the skill's real output