Ui styling

Skill yigityildiz0/universal-ai-skill-library/skills/common/ui-styling

531 searchable AI Agent Skills for Claude Code, OpenAI Codex, and OpenCode — EN/TR catalog, platform and risk notes, direct ZIPs, and curated bundles.

Install

npx -y skills add yigityildiz0/universal-ai-skill-library --skill ui-styling

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

3 things to look at

18 days oldThe repository was created 18 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
1 stars1 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

Implement and refine accessible, responsive interfaces using an existing component system or utility CSS, with strong state coverage, semantic tokens, dark mode, and framework-aware styling. Use for component styling, Tailwind or shadcn-style workflows, responsive layouts, theme implementation, visual polish, or UI consistency reviews.

SKILL.md

2.6 KB, 458 tokens by cl100k_base, as published. Nobody here has run it

UI Styling

Work with the project's installed framework and component library. Do not replace the stack or add dependencies merely because examples use a particular library.

Workflow

Inspect the existing stack, components, tokens, CSS strategy, breakpoints, and conventions.
Identify the smallest reusable component boundary.
Define semantic tokens and variants before adding one-off utilities.
Implement mobile-first layout and all interaction states.
Verify keyboard, screen-reader, contrast, zoom, touch, reduced-motion, and dark-mode behavior.
Inspect rendered output at representative widths when browser or visual tools are available.
Run the project's formatter, type checks, tests, and accessibility checks.

Component rules

Preserve native semantics and labels.
Keep focus visible and logically ordered.
Use one source of truth for variants.
Cover default, hover, focus-visible, active, disabled, loading, selected, error, and success states.
Keep touch targets and spacing usable on mobile.
Avoid arbitrary z-index, spacing, color, shadow, and radius values when tokens exist.
Prefer content-driven layouts over fixed heights.

References

Read only what the task needs:

references/shadcn-components.md
references/shadcn-theming.md
references/shadcn-accessibility.md
references/tailwind-utilities.md
references/tailwind-responsive.md
references/tailwind-customization.md
references/canvas-design-system.md

Bundled helpers

Resolve skill-dir to this folder before running scripts. Preview generated configuration and never overwrite existing project config without reviewing the diff.

python "<skill-dir>/scripts/shadcn_add.py" --help
python "<skill-dir>/scripts/tailwind_config_gen.py" --help

Output contract

Report the components and tokens changed, responsive/state coverage, accessibility checks, tests run, and remaining visual or framework constraints.

Guardrails

Do not install components or packages without checking project policy and user intent.
Do not copy examples that conflict with the installed framework version.
Do not hide accessibility regressions behind visual polish.
Do not hardcode an AI provider, model, or host-specific skill path.