Independent practice / 13 November 2026
Six AI skills for website design, interface review and React engineering. Choose by the problem you need to solve, with original sources and reuse notes.
Website UI skills are reusable instructions and, in some cases, tools for a coding agent. They can help structure a design or review task. They do not replace a clear brief, real content or checking the result in a browser.
For a static HTML/CSS personal site like this one, focus first on visual direction, review and refinement. The two React-specific skills are relevant when the project actually uses React.
01 / Set a visual direction
A new page lacks a coherent identity. Start with audience, hierarchy and typography.
Use the frontend-design folder from anthropics/skills with your agent. Provide the audience, brand constraints, page goal and preferred stack. Start with one page and review the result visually.
02 / Coordinate a design system
Several pages need consistent colors, typography and interaction patterns.
Follow the repository installation guide for your coding tool. Its search tooling requires Python 3. Describe the site and stack, generate a design direction, then check contrast and mobile layouts yourself.
03 / Review an existing interface
Check keyboard access, focus, forms and motion before shipping.
Select web-design-guidelines from vercel-labs/agent-skills and provide the UI files to review. It fetches the current Web Interface Guidelines at review time, so record the source revision. License not independently confirmed; link-only listing.
04 / Refine a working page
The page works but feels generic or visually uneven. Review one section at a time.
Follow the official installer guide, initialize project context and target a single component with critique or polish. Review installer hooks first. Live Apply can invoke an agent with approvals disabled; keep live copy Apply in chat mode or off.
05 / Investigate React performance
Use for React or Next.js performance issues, with measurements before and after.
Select vercel-react-best-practices from the repository installer. Provide React or Next.js components and a concrete performance issue; measure before and after changes. This is an engineering skill, not a visual style generator.
06 / Simplify React components
Use when component APIs accumulate flags and reuse becomes difficult.
Select vercel-composition-patterns and review a component family with many behavior flags. Check the project React version: React 19-specific guidance must not be applied blindly to earlier versions.
Redesign my personal website around my identity, selected work and a public resource library. Use editorial typography and real project content. Keep the layout substantial, with restrained borders and soft background groupings. Preserve bilingual links, search and keyboard navigation. First propose the reading order, then implement one page and explain what needs visual review.
No. Start with the task that matters now. Overlapping instructions can make design choices harder to interpret; compare changes in small steps.
Check each source for a Codex installation option and required tools. A repository containing SKILL.md is not, by itself, proof that all of its scripts or integrations work in your environment.
There is no such guarantee. Build useful, original pages with descriptive titles and relevant links, then observe actual search impressions and clicks. Google’s helpful-content guidance ↗