Skill807 estrellas del repoactualizado 4d ago

web-design-guidelines

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

Ver fuente Repositorio: Better-Fullstack

Instalar en Claude Code

Copiar

git clone --depth 1 https://github.com/Marve10s/Better-Fullstack /tmp/web-design-guidelines && cp -r /tmp/web-design-guidelines/.agents/skills/web-design-guidelines ~/.claude/skills/web-design-guidelines

Después abre una sesión nueva de Claude Code; el skill carga automáticamente.

Definición

SKILL.md

# Web Interface Guidelines

Review files for compliance with Web Interface Guidelines.

## How It Works

1. Fetch the latest guidelines from the source URL below
2. Read the specified files (or prompt user for files/pattern)
3. Check against all rules in the fetched guidelines
4. Output findings in the terse `file:line` format

## Guidelines Source

Fetch fresh guidelines before each review:

```
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
```

Use WebFetch to retrieve the latest rules. The fetched content contains all the rules and output format instructions.

## Usage

When a user provides a file or pattern argument:
1. Fetch guidelines from the source URL above
2. Read the specified files
3. Apply all rules from the fetched guidelines
4. Output findings using the format specified in the guidelines

If no files specified, ask the user which files to review.

Del mismo repositorio

add-to-projectSkill

Add capabilities, addons, deployment targets, generated CI, services, or stack updates to an existing Better Fullstack project. Use when the current repo has bts.jsonc or the user asks to extend a generated project. Prefer bfs_plan_stack_update and bfs_apply_stack_update; use legacy addon tools only for addon/deploy-only flows.

better-fullstackSkill

Scaffold, plan, or extend Better Fullstack projects with the generator, CLI, or MCP server. Use when a user asks to create, generate, or scaffold a fullstack starter; choose a Better Fullstack stack; add Better Fullstack capabilities; compare agent scaffolding paths; or avoid hand-authoring boilerplate project files.

create-remotion-geistSkill

Create Remotion videos using the Geist design system aesthetic. Use when asked to create videos, animations, or motion graphics that should follow Vercel's visual style - dark theme, spring animations, Geist typography, and the Geist color palette.

frontend-designSkill

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

modern-short-videoSkill

Create modern product launch/pitch videos using Remotion. Use when creating app promo videos, SaaS launch videos, product demos, or startup pitch videos.

remotionSkill

Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays

remotion-animationSkill

Generates animation configurations for Remotion including spring configs, interpolations, easing functions, and timing logic. Focuses ONLY on animation parameters, NOT component implementation. Use when defining animation behavior or when asked to "configure animations", "setup spring configs", "define easing curves".

remotion-best-practicesSkill

Best practices for Remotion - Video creation in React