FrancoStino/ui-review
bundled-skills/ui-review/SKILL.md
Review UI code for StyleSeed design-system compliance, accessibility, mobile ergonomics, spacing discipline, and implementation quality.
$ install --global
skillsauthnpx skillsauth add FrancoStino/opencode-skills-antigravity ui-reviewInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 28, 2026, 3:10 AM256.5s1 file scanned
SKILL.md
- name:
- ui-review
- description:
- Review UI code for StyleSeed design-system compliance, accessibility, mobile ergonomics, spacing discipline, and implementation quality.
- category:
- design
- risk:
- safe
- source:
- community
- source_repo:
- bitjaru/styleseed
- source_type:
- community
- date_added:
- 2026-04-08
- author:
- bitjaru
- tags:
- [ui, review, design-system, accessibility, styleseed]
- tools:
- [claude, cursor, codex, gemini]
UI Review
Overview
Part of StyleSeed, this skill audits UI code against the Toss seed's conventions instead of reviewing it as generic frontend work. It focuses on design-token discipline, component ergonomics, accessibility, mobile readiness, typography, and spacing consistency.
When to Use
- Use when a component or page should follow the StyleSeed Toss design language
- Use when reviewing a UI-heavy PR for consistency and design-system violations
- Use when the output looks "mostly fine" but feels off in subtle ways
- Use when you need a structured review with concrete fixes
Review Checklist
Design Tokens
- no hardcoded hex colors when semantic tokens exist
- no improvised shadow values when tokenized shadows exist
- no arbitrary radius choices outside the system scale
- no random spacing values that break the seed rhythm
Component Conventions
- uses the project's class merge helper
- supports
classNameextension when appropriate - uses the agreed typing pattern
- avoids wrapper components that only forward one class string
- reuses existing primitives before inventing new ones
Accessibility
- touch targets large enough for mobile
- visible keyboard focus states
- labels and
aria-*attributes where needed - adequate color contrast
- reduced-motion respect for animation
Mobile UX
- no horizontal overflow
- safe-area handling where relevant
- readable text sizes
- thumb-friendly interaction spacing
- bottom nav or sticky actions do not obscure content
Typography and Spacing
- uses the system type hierarchy
- display and headings are not overly loose
- body text remains readable
- spacing follows the seed grid instead of arbitrary values
Output Format
Return:
- A verdict: Pass, Needs Improvement, or Fail
- A prioritized list of issues with file and line references when available
- Concrete fixes for each issue
- Any open questions where the design intent is ambiguous
Best Practices
- Review against the seed, not against personal taste
- Separate stylistic drift from real usability or accessibility bugs
- Prefer actionable diffs over abstract criticism
- Call out duplication when an existing component already solves the problem
Additional Resources
- StyleSeed repository
- Source skill
Limitations
- Use this skill only when the task clearly matches the scope described above.
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
Related Skills
FrancoStino/youtube-full
development
VerifiedTrustedCommunity
Fetch YouTube transcripts, search videos, browse channels, and extract playlists via TranscriptAPI — no yt-dlp, no Google API key, works from any cloud server.
31SKILL.mdUpdated Jun 5, 2026
FrancoStino/yield-intelligence
development
VerifiedTrustedCommunity
Passive income portfolio analysis — activate when user asks about dividend yields, Treasury rates, REIT income, monthly passive income goals, or portfolio yield optimization. Scans 4 asset classes, ranks by risk-adjusted return, and builds allocations targeting a specific monthly income.
31SKILL.mdUpdated Jun 5, 2026
FrancoStino/vibecode-production-qa-validator
devops
VerifiedTrustedCommunity
End-to-end production QA, build verification, and launch-readiness checklist for fullstack Next.js apps. Covers TypeScript, linting, tests, build, SEO tags, route regression, and sitemap validation.
31SKILL.mdUpdated Jun 5, 2026
FrancoStino/vibe-code-cleanup
development
VerifiedTrustedCommunity
Safe production cleanup and hardening for vibe-coded fullstack apps (Next.js, React, Node.js, etc.). Removes dead imports, unused files, and broken references without breaking routes or APIs.
31SKILL.mdUpdated Jun 5, 2026