vercel-labs/sandcastle
3 skills13 installs144 starsGitHub
Install
npx skills add https://github.com/vercel-labs/sandcastleSkills in this repo
1Web Design Guidelinesweb-design-guidelines is a checker skill for solo builders who want agent-assisted UI reviews without maintaining a local rulebook. When someone asks to review UI, check accessibility, audit design, or validate a site against best practices, the agent pulls fresh Web Interface Guidelines from Vercel’s public source, reads the paths or patterns you specify, and reports violations in the compact file:line format the guidelines define. It suits React and web frontends on SaaS dashboards, marketing sites, and browser extensions where small teams skip dedicated design QA. Use it during Build while polishing components and again in Ship before merge or deploy so regressions surface early. The workflow is deliberately simple: fetch, read, apply all rules, emit findings—no scoring theater. Pair it with your own component tests; this skill does not replace manual screen-reader checks or live performance audits.6installs2Vercel React Best PracticesVercel React Best Practices is a dense performance playbook solo builders can attach when Claude Code, Cursor, or Codex touches React or Next.js. It organizes more than forty rules into eight impact-ordered categories so agents fix waterfall fetches, barrel imports, and bundle bloat before chasing micro-optimizations. The document assumes automation: every rule explains what breaks, shows the wrong pattern beside the right one, and states why the change matters for real apps. Use it during frontend implementation, when refactoring legacy pages, or before release when you want perf fixes grounded in the same standard Vercel engineers use. It is not a substitute for product design or backend API design—stay within UI, data-fetching on the client and server components boundary, and Next.js routing concerns. Teams shipping marketing sites, dashboards, or SaaS shells on Next.js get the most leverage by treating the guide as a standing reviewer alongside your tests and code-review skills.4installs3Vercel Composition Patternsvercel-composition-patterns packages Vercel engineering guidance for React codebases that agents edit as often as humans. It pushes compound components, providers that own state, and explicit variants so features do not accumulate boolean props that confuse both reviewers and models. Sections rank priority—architecture first, then decoupled state and DI-friendly context, then implementation habits like favoring children composition over render props. Solo builders shipping Next.js or design-system-heavy SaaS benefit when a refactor prompt would otherwise shotgun props across ten files. The document states it is mainly for agents when maintaining or generating UI, which makes it a durable reference during Build and again in Ship review when an agent proposes yet another isDisabled flag.3installs