Skill Claude CodeCodex
Produces branded visual identity elements — logo concepts, icon sets, seamless patterns, brand illustrations, and textures — as generation-ready prompt specs, and generates them via FAL.ai fal-ai/nano-banana-pro when the automation is configured. Use when the user says 'design a logo', 'I need icons', 'brand pattern /…
Skill Claude CodeCodex
Establishes a brand's visual direction and compresses it into a Creative Direction Brief with a paste-ready 'style block' that every downstream image prompt reuses, so all generated assets look like they came from one brand. Use when the user says 'define my brand style', 'I want a consistent look', 'what should my…
Skill Claude CodeCodex
Turns any request for an AI-generated image into precise, generation-ready prompt specs and — when the FAL.ai automation is configured — the generated files themselves, using the single model fal-ai/nano-banana-pro. Use whenever the user asks to 'generate an image', 'make a picture of X', 'create a thumbnail / hero…
Skill Claude CodeCodex
Dispatcher for the creative suite: diagnoses a multi-asset creative request with a few questions, then routes it through the right sequence of creative skills, naming the artifact each step passes to the next, and wires in the FAL.ai automation (single model fal-ai/nano-banana-pro via docs/creativecli.py) when…
Skill Claude CodeCodex
Facilitates an interactive session that turns a product or subject into an original, internally consistent visual design language for any artifact — infographics, video storyboards, websites, or mobile app UI/UX. Use when the user wants an original design language, identity, or art direction, or when a design feels…
Skill Claude CodeCodex
Produces professional AI product photography — clean e-commerce shots, lifestyle scenes, hero images, macro detail shots, and flat lays — as generation-ready prompt specs, and generates the files via FAL.ai fal-ai/nano-banana-pro when the automation is configured. Use when the user says 'product photos', 'shots of my…
Skill Claude CodeCodex
Plan an animated product video end-to-end: pick the video type, define the animation style and pacing, write a beat-by-beat shot list, and produce ready-to-run keyframe prompts. Use whenever the user wants a product video, product animation, launch video, promo or ad video, animated product reveal, 360 spin, feature…
Skill Claude CodeCodex
Write a complete, render-ready Remotion video script as structured JSON: analyze the user's codebase or product, break the video into timed scenes, specify every visual element, animation, transition, and voiceover line, and list required assets and Remotion packages. Use whenever the user wants a Remotion video, a…
Skill Claude CodeCodex
Produce platform-correct social media graphics: pick the right dimensions and layout per platform, write the headline/body/CTA copy, build the generation prompt, and generate the image via the repo's FAL.ai pipeline. Use whenever the user wants a social post visual, Instagram post/story/carousel, LinkedIn graphic…
Skill Claude CodeCodex
Plan presenter-led and UGC-style videos: choose the presenter archetype, define styling, setting, lighting, and framing, write the hook/body/CTA script skeleton, and produce keyframe prompts for the repo's FAL.ai pipeline. Use whenever the user wants a talking-head video, presenter video, UGC ad, testimonial, founder…
Skill Claude CodeCodex
Audit a frontend against WCAG and fix what fails: semantic HTML, keyboard navigation, focus management, screen-reader support (ARIA), color contrast, forms, and media alternatives. Use when the user asks 'is this accessible', 'make this WCAG/AA compliant', 'add keyboard navigation', 'fix screen reader support', 'a11y…
Skill Claude CodeCodex
Build or repair a color system: full brand and neutral ramps, semantic color tokens, contrast-verified pairings, dark mode, and status colors — delivered as a tokens file (CSS variables / Tailwind theme) with every text pairing's contrast ratio computed. Use when the user says 'the colors look off', 'colors clash'…
Skill Claude CodeCodex
Audit and refactor a frontend codebase's component structure, or design a component library from scratch, using atomic design, composition, and disciplined prop interfaces. Use when the user says 'my components are a mess', 'this component is 800 lines', 'refactor my components', 'build a component library', 'how…
Skill Claude CodeCodex
Translate a design (Figma mockup, spec, screenshot, or verbal description) into code with pixel- and motion-level fidelity, using the browser's rendering pipeline as a constraint: exact spacing/timing via tokens, GPU-safe animations, no layout thrashing, 60fps interactions. Use when the user says 'implement this…
Skill Claude CodeCodex
Create or extract a design-token foundation — colors, typography, spacing, radii, shadows — as a real tokens file (CSS variables and/or Tailwind theme) plus a migration map from current hardcoded values. Use when the user says 'set up a design system', 'our styles are inconsistent', 'we have 50 shades of the same…
Skill Claude CodeCodex
Audit and implement an app's error UX end-to-end: rewrite error messages, place them correctly, add recovery actions, and build error states for validation, network, permission, system, and 404 failures. Use when the user says 'improve my error handling', 'my error messages suck', 'users get stuck when something…
Skill Claude CodeCodex
Diagnose a codebase's frontend design maturity and route the work through the right sequence of frontend-design skills. Use when the user makes a broad or vague design request — 'make this look better', 'polish the UI', 'this feels like an MVP', 'our frontend is a mess', 'where do I start with design', 'make it feel…
Skill Claude CodeCodex
Design and implement the motion layer of a UI — microinteractions, transitions, hover/press feedback, and animation timing/easing — as working CSS/JS plus a written animation spec. Use when the user says 'the app feels janky', 'animations feel off', 'make it feel smoother/snappier', 'add a transition', 'the modal just…
Skill Claude CodeCodex
Fix or build responsive layout: page shells, grids, card layouts, sidebars, breakpoint strategy, container queries. Use when the user says 'this breaks on mobile', 'the layout is messy', 'things don't line up', 'our spacing is inconsistent between sections', 'make this responsive', 'center this properly', or asks for…
Skill Claude CodeCodex
Audit an app's async surfaces and implement the right loading, progress, and empty states — skeleton screens, spinners, progress bars, first-use/no-results/error-empty views — chosen by expected latency and layout knowledge. Use when the user says 'add loading states', 'the page just goes blank while fetching', 'add a…
Skill Claude CodeCodex
Diagnose and fix how slow a frontend feels and measures: optimistic UI for mutations, latency masking (skeletons, blur-up, preloading, staggering), request batching/deduplication, and Core Web Vitals (LCP/INP/CLS) remediation. Use when the user says 'the app feels slow', 'clicks feel laggy', 'improve performance', 'my…
Skill Claude CodeCodex
Build or repair a typography system: a modular type scale, font choices and loading, hierarchy, line-height/line-length, and fluid sizing — delivered as tokens (Tailwind fontSize config or CSS variables) applied to real components. Use when the user says 'the text looks off', 'fonts are inconsistent', 'headings don't…
Skill Claude CodeCodex
Refactor cluttered or flat interfaces so users instantly see what matters, using size, weight, contrast, and whitespace — not more color. Use when the user says 'it looks cluttered', 'everything competes for attention', 'it looks amateur/flat', 'users can't find the button', 'make this scannable', 'this screen is…
Skill Claude CodeCodex
Define a brand's voice and produce a working voice guide: a personality archetype, settings on eight voice dimensions, do/don't rules, word choices, a tone matrix by context, and before/after rewrites of the user's real content. Use when the user says 'define my brand voice', 'what should our tone be', 'make this…