What is the app-ui-ux-best-practices skill?
The app-ui-ux-best-practices skill is the core methodology in the OJO Design Skills repository. Your AI coding agent picks a track based on the product's value, confirms a style direction with you, then produces design tokens, atomic Tailwind component recipes and spring motion values.
The app-ui-ux-best-practices skill is the core methodology of OJO Design Skills. It picks a track based on the product's value proposition, then produces complete design specifications for an AI coding agent to build from.
Convention Track adopts one proven design language, such as Notion, Linear or Stripe, for SaaS and utility products. Innovation Track builds a brand-driven identity through Material Metaphor, archetype, narrative or cultural-semiotic methods.
How the skill works
- Both tracks require a style-direction confirmation gate before tokens: the agent presents 2 to 3 genuinely distinct directions and waits for selection.
- A register is derived from 5 dials: Energy, Finish, Density, Weight and Seriousness, with a vague-word firewall that rejects mood adjectives such as premium as a justification.
- Components are defined as atomic Tailwind class strings with an 8-state model: Default, Hover, Active, Focus, Disabled, Loading, Success and Error.
- Before delivery, the agent reads the design-audit reference and applies all quality checks.
Guardrails
Purple-blue, pink-cyan and rainbow gradients are strictly banned as AI-slop triggers. Quality standards include text contrast of at least 4.5:1, body text of at least 14sp, and icons with a 1.5 to 2px stroke on a 24x24 grid.
Who the app-ui-ux-best-practices skill is for
Best for
- SaaS dashboards, B2B back-offices, developer tools and productivity tools, which the Convention Track targets.
- Brand-driven products that need an identity built through Material Metaphor, archetype or narrative methods.
- Teams that want design tokens, component recipes and motion values written as specs the agent can build from.
Not for
- Running one evidence-led review across performance, accessibility, SEO and best practices, which the web quality audit skill covers.
- Adding animated components with shadcn, which the magic-ui skill covers.
- Choosing between ScrollTrigger and Motion v12 patterns for scroll animation, which the gsap-framer-scroll-animation skill covers.
- Applying jobs to be done, design phases and a heuristics checklist to flows and wireframes, which the ux-design skill covers.
How to install App UI UX Best Practices Skill: Two-Track Design Method
curl -fsSL https://raw.githubusercontent.com/touchine-ojo/OJO-Design-Skills/main/scripts/install.sh | bash -s -- --target <client>Check the requirements
The remote installer requires Bash, curl and tar.
Pick your client
Replace <client> with codex, claude-code, zcode, deepcode, workbuddy, opencode or generic. Claude Code installs to ${CLAUDE_HOME:-~/.claude}/skills and Codex to ${CODEX_HOME:-~/.codex}/skills.
Run the command
The command installs all skills in the repository, including app-ui-ux-best-practices.
Reload the client
Restart or reload the client if it does not pick up the new skills. Skills then activate automatically when the agent detects design-related intent.
Check that it loaded
Skills activate automatically when the agent detects design-related intent, such as design system or design tokens.
Key features
- Two-track methodologyConvention Track adopts a proven design language for SaaS and utility products. Innovation Track builds a brand-driven identity via Material Metaphor, archetype, narrative or cultural-semiotic methods.
- Style direction confirmation gateBefore producing tokens, the agent presents 2 to 3 genuinely distinct directions and waits for your selection.
- Register derivationFive dials, Energy, Finish, Density, Weight and Seriousness, plus a vague-word firewall so mood adjectives are never a justification.
- Anti-AI-slop guardrailsPurple-blue gradients, gray-box placeholders and single-hue palettes are hard-banned, and rules are enforced rather than suggested.
- Real-imagery requirementAny screen that shows imagery must use real, subject-specific assets, with no decorative placeholders, fake stock smiles or gradient blobs.
- Design tokensThe 60/30/10 split for app screens, a saturation budget, exact hex values and no default Tailwind color names.
- Atomic component recipesComponents are atomic Tailwind class strings with an 8-state model: Default, Hover, Active, Focus, Disabled, Loading, Success and Error.
- Spring physics motionMotion uses spring physics rather than fixed curves, for example a button press with scale 0.98, stiffness 400 and damping 10.
- Layout and densityA 12-column or 8pt grid with density tiers, followed by a specs output of 9 items.
- Quality gateBefore delivery the agent reads the design-audit reference and addresses issues before presenting. Text contrast is at least 4.5:1 and body text at least 14sp.
Frequently asked questions
What is the app-ui-ux-best-practices skill?
It is the core methodology in the touchine-ojo/OJO-Design-Skills repository. It picks a Convention Track or Innovation Track based on the product's value proposition, then produces complete design specifications that your AI coding agent builds from, including tokens, component recipes and motion.
How do I install app-ui-ux-best-practices?
Pipe the repository's scripts/install.sh to bash with --target <client>, replacing <client> with your agent such as codex or claude-code. It needs Bash, curl and tar. Restart or reload the client if it does not pick up the new skills. Skills then activate automatically when the agent detects design-related intent.
Which clients does the installer support?
The documented targets are codex, claude-code, zcode, deepcode, workbuddy, opencode and generic. Each has a default install directory, for example ${CODEX_HOME:-~/.codex}/skills for Codex and ${OPENCODE_CONFIG_DIR:-~/.config/opencode}/skills for OpenCode. The --dest option installs to an explicit directory, and --dry-run previews what would be written.
What is the difference between the two tracks?
Convention Track is for products whose value is in utility, such as SaaS dashboards, B2B back-offices and developer tools, and adopts a proven design language. Innovation Track is for brand-driven products and builds an identity through Material Metaphor, archetype, narrative or cultural-semiotic methods.
Which design patterns does it ban?
Purple-blue, pink-cyan and rainbow gradients are strictly banned as AI-slop triggers. Gray-box placeholders and single-hue palettes are also hard-banned, and any screen showing imagery must use real, subject-specific assets instead of decorative placeholders, fake stock smiles or gradient blobs. These are rules, not suggestions.
Does the agent decide the style by itself?
No. Both tracks require a mandatory style-direction confirmation gate before producing tokens. The agent presents 2 to 3 genuinely distinct directions and waits for your selection, and it derives a register from five dials: Energy, Finish, Density, Weight and Seriousness.