agentsclimarketplace

Beautiful ui

Skill Kainiko943/beautiful-ui/beautiful-ui

Make AI coding agents design beautiful, accessible, platform-native UI.

Install
npx -y skills add Kainiko943/beautiful-ui --skill beautiful-ui

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 2 stars2 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Use when users ask to design, redesign, or improve the interface for a product, app, site, screen, flow, or dashboard and the main goal is a beautiful, intentional UI before implementation.

SKILL.md

2.8 KB, as published. Nobody here has run it

Beautiful UI

Overview

Use this skill when the primary job is UI design quality. Do not jump straight into code. Inspect the product and repo, choose a visual direction, define a design-system core, design the key screens and states, adapt for the target platform, then verify the handoff.

Workflow

  1. Inspect the repo, product context, audience, and existing UI signals.
  2. Define the visual direction before implementation.
  3. Build the design-system core: color, type, spacing, surfaces, corners, borders, shadows, and motion.
  4. Design the key screens and the important states.
  5. Load the right platform adapter.
  6. Produce implementation-facing handoff.
  7. Run ui-verification before calling the design complete.

Output Contract

  • Visual direction
  • Design-system core
  • Prioritized screen plan
  • Screen-by-screen UI spec
  • Component guidance
  • State coverage
  • Platform-specific handoff
  • Verification checklist

Adapter Selection

  • Use platform-web-ui for responsive browser products.
  • Use framework-shadcn-tailwind-ui with platform-web-ui when the repo uses shadcn/ui, Tailwind CSS, components.json, or local components/ui source.
  • Use cinematic-web-experience with platform-web-ui when the user asks for a premium, demo-worthy, immersive, WebGL, Three.js, portfolio, product showcase, or wow-factor web experience.
  • Use platform-ios-ui for iPhone or iPad-first native apps.
  • Use platform-android-ui for Android-first native apps.
  • Use multiple adapters only when the product must span platforms.
  • If platform is unclear after repo inspection, ask one short question.

Read These References

  • references/design-principles.md
  • references/default-workflow.md
  • references/output-templates.md
  • references/anti-patterns.md
  • references/platform-selection.md
  • references/repo-first-design.md

Claude Upgrade Path

When the user is using Claude Code and wants a noticeably better UI result, route them through:

  • docs/claude-quickstart.md
  • docs/s-tier-quality-bar.md
  • docs/rubrics/ui-quality-rubric.md
  • docs/framework-guides/shadcn-tailwind.md for shadcn/ui and Tailwind work
  • recipes/claude-cinematic-web.md for cinematic web work
  • evals/cinematic-prompts.md for before/after quality checks

Guardrails

  • Do not start with implementation.
  • Do not produce generic card piles, arbitrary gradients, or default-font layouts.
  • Do not design only the happy path.
  • Do not force pixel parity across platforms.
  • Do not invent components before checking the repo.
  • Do not skip accessibility, localization pressure, reduced motion, focus behavior, or state coverage.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.