Apply the Gestalt principle of Figure-Ground Relationship — the perceptual separation of what''s perceived as the figure (the focus, the…
Generate deterministic publication-quality architecture, workflow, and pipeline diagrams from structured JSON (FigureSpec) into editable…
Generate, refresh, and validate DESIGN.md files that capture a project's visual identity as machine-readable design tokens (YAML…
Finding and accessing AI/LLM model brand icons from lobe-icons library.
Extract any website's design system into an agent-ready DESIGN.md using Firecrawl scrape evidence.
Use this skill when the question involves cursor speed, pointer acceleration curves, or interaction with input devices that vary in…
Use this skill when designing for the edges and corners of the screen — where the cursor cannot overshoot, making them effectively…
Apply Focus.AI brand guidelines to documents, presentations, websites, and other materials.
Translate a design brief — structured I-Lang or plain English — into a concrete DESIGN.md and optional HTML token preview.
Visual designer — brand identity, color systems, typography, design tokens, and UI design.
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI.
Execute Framer secondary workflow: Core Workflow B.
Create a minimal working Framer example.
Install and configure Framer SDK/CLI authentication.
Configure Framer local development with hot reload and testing.
Optimize Framer API performance with caching, batching, and connection
Apply production-ready Framer SDK patterns for TypeScript and Python.
Framework-specific accessibility patterns, common pitfalls, and code fix templates for React, Next.js, Vue, Angular, Svelte, and Tailwind…
Create visually strong landing pages, websites, and app UIs with restrained composition.
Staff Frontend & UI/UX Mastery Skill
Create distinctive, production-grade frontend interfaces with strong visual direction, polished typography, considered layout, and working…