emcquesten
UserSeven design and build skills for Claude Code, plus two hooks that stop design drift. Clear authorship, MIT licensed, beginner-friendly docs.
Categories
Indexed Skills (6)
design-remix-partner
Senior design partner for curating, deconstructing, and remixing design inspiration into original concepts — websites AND app UI. Use for: 'help me find design inspiration', 'shop Mobbin with me', 'I have references but don't know where to start', 'remix these designs', 'deconstruct this design', 'what hero/section should I use', 'read my Figma inspiration board', or shared design screenshots. Also: one-off design reads ('help me understand this design', 'how did they get this?', 'why does this look off/ugly?'), motion forensics ('how was this scroll animation made?' — dissects screen recordings, site code, live sites), and hard starting points: asset-poor clients, boring industries, blank-page paralysis. Workflow: Socratic interview, guided shopping, deconstruction into moves, remix matrix, distinct directions, section build sheets. Plus post-build drift checks ('does my site match the concept?') and client rationale docs. Teaches design thinking in plain language. Complements world-class-web-designer.
prd-generator
Generate comprehensive Product Requirements Documents (PRDs) from rough ideas. Use this skill whenever the user wants to create a PRD, write product requirements, define a product spec, plan a new product or feature, turn an idea into a document for engineering, or needs help scoping a project. Also trigger when users share a product idea and want it formalized, say things like "I want to build X", "write me a spec for Y", "help me scope this project", or ask for product planning documents of any kind — even if they don't use the term "PRD" explicitly.
project-scaffolder
Scaffolds production-ready project codebases from a PRD and tech stack. Use this skill whenever the user wants to initialize a new project, scaffold a codebase, set up a project from scratch, bootstrap a repo, or go from planning to code. Also trigger when the user says things like "set up the project", "create the boilerplate", "initialize the codebase", "scaffold this", "start building", or has a PRD and tech stack ready and wants to begin development. This skill reads whatever PRD and tech stack decisions already exist and builds the project foundation accordingly — it never overrides those decisions.
spacing-rhythm-auditor
Audit and fix spacing, margins, padding, container consistency, and visual rhythm in any design — source code (CSS/Tailwind), live pages, Figma files, or screenshots. Use when a design 'looks off', after Figma-to-code conversion, when spacing/alignment/whitespace feels inconsistent, or to derive and document a spacing system when none exists. Checks scale conformance, proximity grouping, heading rhythm, container widths, responsive compression, and touch targets. Audits first, fixes on approval, and persists the spacing system so future sessions inherit it.
ui-ux-design
Apply senior UX/UI engineering principles when building or modifying any user-facing interface. Use this skill whenever creating components that display data, handle user input, manage state transitions, or need accessibility and responsive design — including pages, forms, modals, dashboards, data tables, settings panels, onboarding flows, and error handling. Also use when reviewing existing UI for usability issues, or when you need implementation patterns for common components (tables, filters, navigation, search). This complements the frontend-design skill (which focuses on visual aesthetics) by ensuring interfaces actually work well for real humans.
world-class-web-designer
Activate to design or critique any website, landing page, marketing site, SaaS product UI, or dashboard at the level of the top 1% of designers (Rauno Freiberg, Emil Kowalski, Linear, Vercel, Stripe, Pentagram, Frank Chimero). Use whenever the user asks to design a website/homepage/landing page/product UI/dashboard, redesign an existing site, critique or audit a design, decide on a hero or section layout, translate a business/brand into a visual system, choose typography or color, get rid of AI-generated look, avoid amateur design, or level up the quality of an existing design. Also triggers on: 'design like a pro', 'make this look world-class', 'not AI-looking', 'not generic', 'original design', 'mentor me on design', 'explain the design decisions', 'why did you choose this'. Refuses defaults and generic templates. Teaches the user why every decision is made in plain, elementary language.
Bio shown is the top-scored skill's repo description as a fallback — real GitHub bios land in a future update.