web-design-style

Apply universal web design system using utilities.css (never modify), tokens.css (design variables), and components.css (BEM naming). NO inline styles, NO Tailwind. Use utility classes first (spacing, typography, layout, responsive), then design tokens for all values, then BEM components only when needed. Mobile-first approach. Use when writing HTML/CSS, styling React/Astro components, or ensuring consistent design across projects. Includes complete utility class reference and common patterns for cards, forms, grids.

databio

SKILL.md

Name

web-design-style

Description

ai-sandbox

A collection of AI resources, guides, and brainstorming space for the lab.

What's Here

ai-sandbox/
├── agents/           # Agent examples
├── commands/         # Custom slash commands (organized by user)
├── skills/           # Skill definitions (organized by user)
├── workspaces/       # Multi-repo project workspaces
│   ├── workspace.py  # Setup script for workspaces
│   └── <name>/       # Individual workspace (e.g. refgenie)
│       ├── .claude/  # Shared AI config (tracked)
│       ├── plans/    # Cross-repo plans and docs
│       └── repos/    # Cloned git repos (gitignored)
└── resources/        # Guides, ideas, and references
    ├── guides/       # How-to guides for AI tools
    ├── ideas/        # Brainstorming space
    └── links.md      # Curated external links

Getting Started

New to AI tools? Start here:

Getting Started - Install and configure Claude Code
Configuration - .claude/ directory and CLAUDE.md
Workflows - Common ways to use it
Commands - Built-in slash commands
Skills - Task-oriented capabilities
Agents - How Claude handles complex tasks
Tips & Tricks - Power user features

Contributing Ideas

Have an idea for how AI could help with lab work? Add it to resources/ideas/proposed/ using the idea template.

Resources

See resources/links.md for curated external links.