jmerta/codex-skills
Overview
This skill provides design intelligence for creating and refining frontend UI/UX across websites, landing pages, dashboards, and product interfaces. It offers a searchable database of styles, color palettes, font pairings, chart recommendations, UX guidelines, and stack-specific implementation tips. Use it to speed up design decisions and produce consistent, production-ready interfaces.
How this skill works
The skill analyzes product type, style keywords, industry, and target stack to generate tailored UI recommendations. It searches style, typography, color, layout, chart, and UX domains to assemble a complete design system and stack-specific implementation notes. Results include palettes, font pairings, component guidelines, accessibility checks, and pre-delivery checklist items.
When to use it
- Designing a new landing page, dashboard, or product interface
- Refining visual systems: colors, typography, icons, spacing
- Selecting chart types and data visualization patterns for analytics
- Implementing UI with best practices for React, Next.js, Vue, Svelte, SwiftUI, React Native, or Flutter
- Auditing UI for accessibility, responsiveness, and interaction quality
Best practices
- Start by identifying product type, style keywords, industry, and preferred stack
- Use consistent SVG icon sets and standardize icon sizing (24x24 viewBox)
- Define a single container max-width and consistent spacing scale across pages
- Prefer semantic HTML and Tailwind-like utility classes when stack unspecified
- Ensure contrast ratios (4.5:1 for body text) and visible focus states for accessibility
- Test both light and dark modes and verify no layout shift on hover or focus
Example use cases
- Create a hero-first landing page for a beauty or wellness service with an elegant palette and font pairing
- Design a SaaS analytics dashboard with recommended chart types, color semantics, and responsive layouts
- Audit a mobile app UI for accessibility, consistent iconography, and smooth interaction transitions
- Generate stack-specific implementation notes for migrating a design system to Next.js or React Native
- Produce a pre-delivery checklist to validate visual quality, interaction, layout, and accessibility
FAQ
html-tailwind (default), react, nextjs, vue, svelte, swiftui, react-native, and flutter.
How do I get color palettes and font pairings?
Provide product type and style keywords; the skill returns primary/secondary/CTA palettes and suggested Google Font pairings.
5 skills
This skill helps you design, build, and refine frontend UI/UX with searchable palettes, typography, and stack guidelines across frameworks.
This skill helps you diagnose and fix GitHub Actions CI failures using gh, enabling quick, minimal-diff patches and verified reruns.
This skill helps reproduce, isolate, and fix bugs in a repository, then summarize root cause, fix, and verification steps for reliable delivery.
This skill guides a safe git rebase of your current branch onto a target branch, with built-in conflict resolution guidance.
This skill helps you safely prune stale git branches locally and remotely with reversible steps and explicit delete commands.
