baseline-ui
The baseline-ui skill provides a set of constraints and review guidelines for AI agents to improve UI code quality, focusing on spacing, hierarchy, typography, and layout consistency.
Is baseline-ui safe to install?
Safe to install: our audit of baseline-ui's source files found 0 shell commands, 0 external URLs, file reads and writes (low risk). Every command and URL listed appears verbatim in the skill's source. The skill reads local files to perform code reviews but does not execute shell commands or make network requests.
How we audit skills: our security review methodology.
Who is this skill for?
Developers and AI agents working on UI codebases who need to enforce consistent design and performance standards.
What can you do with it?
- Reviewing UI code for violations of design and performance constraints.
- Applying standardized UI rules to new interface components.
- Cleaning up AI-generated UI code to prevent interface slop.
How good is this skill?
Quality score: 9/10. The skill provides clear, actionable constraints for UI development. It is well-structured and easy to parse for an agent.
What does the skill file contain?
# Baseline UI Enforces an opinionated UI baseline to prevent AI-generated interface slop. ## How to use - `/baseline-ui` Apply these constraints to any UI work in this conversation. - `/baseline-ui <file>` Review the file against all constraints below and output: - violations (quote the exact line/snippet) - why it matters (1 short sentence) - a concrete fix (code-level suggestion) ## Stack - MUST use Tailwind CSS defaults unless custom values already exist or are explicitly requested - MUST use `motion/react` (formerly `framer-motion`) when JavaScript animation is required - S...
Frequently asked questions
Does this skill automatically fix my code?
No. The skill reviews files and provides a list of violations, explanations, and code-level suggestions for the user to implement.
What animation libraries does this skill require?
It requires motion/react for JavaScript animations and suggests tw-animate-css for Tailwind CSS micro-animations.
Does this skill allow custom Tailwind CSS values?
Yes. It mandates Tailwind CSS defaults unless custom values already exist or are explicitly requested.
Related skills
frontend-design
618.4KAI agents tasked with designing and building web interfaces who need to produce unique, high-quality visual identities rather than generic, templated designs
The frontend-design skill provides guidance for creating distinctive, intentional visual designs for web interfaces. It instructs the agent to act as a design lead at a small studio, focusing on avoiding templated defaults by making deliberate choices regarding typography, color palettes, layout, and motion. The skill emphasizes a structured process of brainstorming, planning, and self-critique before writing code.
web-design-guidelines
440.2KDevelopers and designers who need to verify UI code compliance with interface standards
The web-design-guidelines skill audits UI code against Web Interface Guidelines. It fetches current rules from a remote source and compares them against specified local files.
shadcn
217.3KDevelopers building UI components and design systems using shadcn/ui
The shadcn skill manages UI components and design systems for projects using the shadcn/ui framework. It provides tools to search, add, debug, and style components, while enforcing strict composition and styling rules based on project-specific configuration.
extract-design-system
124.5KDevelopers and designers who want to initialize design systems based on existing public websites
This skill extracts design primitives from public websites and generates starter token files for projects.