Loading...
Loading...
Found 144 Skills
Strict anti-slop UI design system for scanning, fixing, redesigning, judging, and preventing generic AI-generated frontend work. Use when Codex works on UI/UX, React/Vue/Svelte/HTML/CSS/Tailwind, landing pages, dashboards, apps, design systems, visual polish, copy, accessibility, motion, or frontend generation that must be judged with severe anti-slop standards. Supports commands such as no-slop --scan, --fix, --redesign, --judge, --prevent, and --economy.
Bridge AI assistants to Figma Desktop via MCP — draw UI with JavaScript, read designs as structured data, extract screenshots and tokens
Analyze and extract design patterns from visual examples. Deconstructs design systems, color palettes, typography, and layout principles from reference materials.
Professional typography rules for UI design, web applications, software interfaces, and all screen-based text. Enforces timeless typographic correctness that LLMs consistently get wrong: proper quote marks, dashes, spacing, hierarchy, and layout. ENFORCEMENT MODE: When generating ANY HTML, CSS, React, JSX, or UI code containing visible text, auto-apply every rule in this skill silently — do not ask, do not explain, just produce correct typography. AUDIT MODE: When reviewing or improving existing interfaces or legacy code, flag violations and provide fixes. Trigger on: any HTML/CSS/React artifact creation, "build a landing page", "create a component", "design a UI", "fix the typography", "make this look professional", "review this layout", web design, presentation design, dashboard creation, document generation, or any task producing visible text for humans. Even if the user doesn't mention typography, apply these rules whenever generating UI output.
Extract a complete design system from an existing website or screenshot into a DESIGN.md file. Analyses colours, typography, component styles, spacing, and atmosphere through browser automation and HTML inspection. Produces a semantic design system document optimised for consistent page generation. Triggers: 'extract design system', 'design system', 'create DESIGN.md', 'analyse the design', 'what design does this site use', 'extract styles from', 'reverse engineer the design'.
In large applications, information architecture determines whether users can find, understand, and act on data. Naming matters. The UI should mirror the data model and signal how data can be transformed. Dangerous or irreversible changes always require a confirm dialog. Use when designing navigation, naming entities, structuring large feature sets, or modelling data-driven UI.
A standalone pricing page — header, plan tiers, feature comparison table, and an FAQ. Use when the brief asks for "pricing", "plans", "subscription tiers", or a "compare plans" page.
Soft, extruded UI elements with inner and outer shadows on monochromatic surfaces for a tactile, embedded look.
Soft, rounded 3D-like shapes mimicking malleable clay with playful, puffy elements and colorful surfaces.
Conversational AI-first interface with minimal controls, clear outcomes, and delegated task flows for agentic workflows.
Throwback design with vintage-inspired typography, high-contrast retro palettes, and nostalgic visual elements.
A modern, graphic, editorial-poster aesthetic — warm and confident — built on alternating cream and burnt orange sections, an amber brand color.