Black FridayLifetime Pro for $224 instead of $449Ends in0d00h00m00sSee the dealTeach Claude Code, Codex and Cursor to design. Picked from open source, installed through Craftwork.
A free agent skill for Claude Code, Codex and Cursor: it sets a design direction, removes the usual AI tells and pulls real icons, fonts and illustrations from Craftwork.
Sets and reviews type by role: scale, line height and tracking, measure, wrapping, tabular numbers, truncation, punctuation and font loading.
One design skill with many verbs: shape, craft, critique, audit, polish, harden, animate, colorize, typeset. Backed by deep reference docs on every part of interface design.
Reviews UI code against Vercel's Web Interface Guidelines, always pulling the latest rule list, and reports short findings with file and line.
Concrete slop patterns in color, gradients, glass, radius, shadows, layout and components, each with a fix.
Grouping, alignment, reading order and responsive structure, plus stress tests for translated and right-to-left layouts.
Anthropic's skill for interfaces that don't look generated: pick a clear aesthetic direction for palette, type, layout and motion before writing code, then check the result against the brief.
Reads the brief, sets dials for variance, motion and density, maps the page to a real design system and runs a strict pre-flight check before shipping a landing page or portfolio.
Emil Kowalski's design engineering philosophy: when and how to animate, exact easing and duration values, springs, component polish and a fixed review format.
A large anti-slop design system: page structures, 21 themes, nav and footer archetypes and 58 slop checks, with audit, redesign and study-a-URL modes and project memory.
Stress-tests a UI with worst-case data, such as long names, missing fields and huge counts, behind a toggle, and reports what broke.
Writes and reviews interface copy: labels, errors, empty states and confirmations in the product's own voice.
Runs all of Jakub Krehel's better-* skills as one review across accessibility, layout, writing, typography, color and polish, ranked by impact.
Audits and fixes hierarchy, spacing, color, depth and typography with the Refactoring UI principles, with a score and a quick diagnostic.
A deterministic design critique: a CLI runs 73 checks with exact thresholds on HTML and CSS, and the skill explains severity, exceptions and CI setup.
An evidence-based audit of one product screen against its own design system, with a self-contained change spec for each finding you pick.
Choosing, pairing and setting web typefaces: evaluation, measurements, hierarchy, responsive type and web font performance.
Ratio-based type scales with CSS and Tailwind tokens, minimum sizes, letter-spacing, caps labels and weight on dark backgrounds.
78 web typography rules in ten groups; every finding names the file, the rule and the fix.
Builds and audits color systems: ramps, semantic roles and token names, notation conversion, measured contrast and gradient interpolation.
A color science knowledge base: OKLCH and other color spaces, gamut mapping, CSS Color 4 and 5, contrast numbers, harmony and naming.
Derives a full UI palette from one or two brand colors: state variants, brand-tinted greys and semantic colors as roles.
Generates an accessible 11-shade palette and semantic tokens from one brand color, with contrast checks and Tailwind v4 output.
Apple's fluid interface principles for the web: instant response, direct manipulation, interruptible springs, momentum and rubber-banding.
Builds an animation in the right order: whether it should animate at all, its purpose, the cheapest tool, properties, easing, interruption and reduced motion.
LottieFiles' motion principles: an eight-step checklist, duration and easing tables, motion personalities and ready patterns for presses, entrances and success states.
Keeps web animation within the frame budget: compositor-only properties, motion off the main thread, React state traps, will-change and a symptom table.
A read-only sweep for places that deserve motion, filtered by how often they are seen and why, with a list of what was rejected.
Audits every animation in a codebase and writes a prioritized plan with a self-contained fix for each.
Reviews and fixes keyboard and focus, ARIA, accessible names, forms, announcements, motion and zoom, naming the WCAG criterion each failure breaks.
Load before writing HTML, JSX, Vue, Svelte or CSS: routes to specialist accessibility checks and keeps findings in one format.
Addy Osmani's WCAG 2.2 audit-and-fix guide, organized by perceivable, operable, understandable and robust, with code examples.
Framework-agnostic web rules: WCAG 2.2, semantic HTML, responsive layout, forms and performance.
iOS accessibility guidance for VoiceOver, Dynamic Type and other assistive tech, starting from the project's own settings.
Prioritized accessibility rules for review or fixing: names, keyboard, focus and dialogs, semantics, forms, announcements and contrast.
Google Stitch's skill that pulls a DESIGN.md with tokens, components and patterns out of any frontend codebase. Works without Stitch.
A searchable design database the agent queries from the command line: UI styles, 192 palettes, font pairings, 119 UX rules and chart types, saved as a design system per project.
Studies a brand from its name, URL, code or screenshots and generates a design-language skill for it, with components, icons and hero analysis.
Writes or updates a DESIGN.md from a repository or a public URL by tracing the evidence for its design language.
Ten ready font and color themes for slides, documents and HTML pages, or a custom theme generated on the spot.
Expo's official guide to a token-based design system of color, spacing and type inside an Expo app.
70 React and Next.js performance rules from Vercel Engineering, ranked by impact: request waterfalls, bundle size, server components, re-renders. One reference file per rule.
Vue 3 best practices: Composition API, script setup, TypeScript, reactivity and SSR, with more than twenty references.
Angular's official skill: generates components and services and advises on signals, forms, routing, SSR, accessibility and animation.
Svelte's official guidance for fast, robust Svelte 5 code: runes, reactivity, events and styling.
The official shadcn/ui skill: detects the project setup, adds and updates components with the CLI, and follows the library's styling and composition rules.
React component API patterns from Vercel: compound components, lifted state, no boolean prop sprawl, React 19 APIs.
Keeps buttons, inputs, badges and pills consistent in radius, border, height, shadow and color, so they speak one interaction language.
Builds chat, agent and tool-call interfaces in React with 21st.dev's Agent Elements components.
Ant Design's skill: looks up props, demos, tokens and deprecations with the bundled CLI while writing antd code.
Builds several genuinely different versions of a UI piece behind an in-page picker so you can flip between them.
Builds three deliberately different versions of a component behind an in-page switcher and helps you pick one.
Creative director principles for HTML artifacts such as pages, reports and plans: size up the brief, apply the fundamentals, edit hard.
A design engineer's workflow for pages, dashboards, prototypes and slides in the browser: check facts, declare a design system, ship an early draft, verify and critique.
Scaffolds a React, Tailwind and shadcn/ui project and bundles it into one HTML file.
Generates validated interactive HTML diagrams, from architecture to sequence and state, out of typed JSON, with optional motion.
Chooses an honest visualization for a question or metric, such as comparison, trend, target or projection, before building it.
An editorial diagram system: 44 diagram types, from architecture to timelines, as self-contained HTML and SVG with a style guide and layout rules.
Strict conventions for architecture and flow diagrams in SVG: no overlaps, balanced layout, clean box and arrow geometry.
Ships accessible charts: real text alternatives, keyboard focus, stable server rendering and color-safe encodings.
AntV's official skill for G2 v5 charts: spec rules, mark types, encode and transform conventions, and pitfalls.
Generative art with p5.js: define the algorithm's idea, then build a seeded piece with an interactive parameter viewer.
Builds detailed interactive isometric SVG figures that explain a technical idea as a physical object, with optional WebGL.
Generates a cohesive SVG icon set for a project from a style spec, with optical corrections and a preview page.
Turns a raster logo into a clean minimal SVG and choreographs it into an SVG or HTML animation.
Anthropic's poster and visual art workflow: write a short design philosophy, then express it as a PNG or PDF composition with bundled fonts.
Builds one persistent Three.js world driven by native scroll, planned with a world bible and a scene ledger.
36 ShaderToy-style GLSL techniques, including signed distance fields, ray marching, fluids, noise and post-processing, with a routing table.
Three.js scene setup, cameras, renderer, the object hierarchy and coordinate systems, with code patterns.
Custom GLSL in Three.js: ShaderMaterial, uniforms and common effect patterns.
Short design-led motion graphics, such as kinetic type, stat count-ups and chart reveals, built as HTML and rendered to video.
Makes 5 to 60 second motion graphics, such as kinetic type, UI demos and logo reveals, from HTML pages rendered frame by frame to MP4.
Turns an article or a voice-over script into a click-through 16:9 web presentation that plays like a video, with optional narration.
Paul Hudson's SwiftUI review: modern APIs, maintainability, accessibility and performance.
Apple's Liquid Glass design language across SwiftUI, AppKit, UIKit and WidgetKit, with the WWDC25 rules and code.
Concrete CSS and meta fixes that make a web app feel native on phones: stuck hover, tap flash, dvh, input zoom, safe areas and overscroll.
Expo's official guide to native-feeling screens: Apple HIG styling, semantic colors, native controls, SF Symbols and sheets.
Android's official workflow for adaptive Compose apps on phones, foldables and tablets: navigation, list-detail panes and lazy lists.
Animation decisions for React Native and Expo: Reanimated or Animated, springs, keeping motion off the JS thread, press states and haptics.
