Omar SobhandClaude Opus 4.7
7b23f61632
Hand-authored skill catalog anchored to real 2026-07 versions:
- Rust 1.97.1 (stable), edition 2024
- React 19.2.7, Server Components + Actions
- TailwindCSS 4.3.3 (CSS-first config, Oxide engine)
- three.js r185 (WebGPURenderer stable, BatchedMesh matured)
- React Native 0.86 / Expo SDK 54+ (New Architecture default)
- cargo-nextest 0.9.140, gitleaks 8.20+, cargo-audit 0.21+
- Postgres 17 (18 in beta, don't rely on)
- CUDA Blackwell, Metal Apple7+, ROCm CDNA3
Ships 15 skills across the categories:
foundation/ workspace-repo-commit-protocol
small-focused-commits
tdd-red-green-refactor
code-review-checklist
int-xx-marker-protocol
decompose-int-items
rust/ write-rust-current-edition
rust-error-handling
cargo-test-driven-development
rust-async-tokio-idioms
backend/ postgres-migrations-forward-only
postgres-index-selection
api-pagination-day-1
frontend/ react-19-server-components
tailwind-v4-idioms
component-4-state-model
mobile/ expo-managed-vs-bare
rn-flashlist-perf
gpu/ gpu-coalescing-and-occupancy
roofline-model
threejs/ threejs-perf-and-teardown
security/ cargo-audit-workflow
secret-scanning-gitleaks
skills_loader.rs walks skills/**/*.md, parses YAML frontmatter
(name, description, when_to_use, tags), upserts via
skills_catalog::upsert_builtin. Idempotent per boot — bumps version
+ appends skill_versions row ONLY when body changes. Deterministic
sha256-derived ids so builtins are stable across boots.
Dockerfile copies skills/ to /etc/clawmates/skills. Server boot
task spawns loader alongside team_template_loader.
Follow-ups (Slice 3.5c continuation, future PRs):
- 20-30 more skills (duckdb, shadcn composition, a11y, WebGPU
migration, metal frame capture, rocprof, deep gitea forge
integration, semgrep rulepacks)
- Bind skills to team template roles (add [role.skills] refs to
templates/teams/*.toml + wire template_role_skills population
in team_template_loader)
Co-Authored-By: Claude Opus 4.7 <[email protected]>
75 lines
2.7 KiB
Markdown
75 lines
2.7 KiB
Markdown
---
|
||
name: tailwind-v4-idioms
|
||
description: TailwindCSS v4 (4.3.3 as of 2026-07) — CSS-first config, no tailwind.config.js by default, container queries, custom variants.
|
||
when_to_use: You're authoring styles in a TailwindCSS v4 project. Frontend team pins this.
|
||
tags: [frontend, css, tailwind, versioned]
|
||
---
|
||
|
||
# TailwindCSS v4 (4.3.3)
|
||
|
||
## What changed vs v3
|
||
|
||
- **CSS-first config**. No `tailwind.config.js` by default. Theme tokens live in your CSS via `@theme { ... }`.
|
||
- **`@import "tailwindcss"`** replaces the three `@tailwind base/components/utilities` directives.
|
||
- **Zero-config content detection** — scans automatically via the Vite/PostCSS plugin, no `content: [...]` glob.
|
||
- **Native CSS variables everywhere** — every design token is a `--color-primary` style var, usable in raw CSS.
|
||
- **Container queries built-in** — `@container/name` variant, no plugin.
|
||
- **Faster** — Rust-powered engine (Oxide), ~100× faster incremental builds.
|
||
|
||
## Minimal setup
|
||
|
||
```css
|
||
/* app.css */
|
||
@import "tailwindcss";
|
||
|
||
@theme {
|
||
--color-brand-500: oklch(0.7 0.15 250);
|
||
--font-display: "Inter", ui-sans-serif;
|
||
}
|
||
```
|
||
|
||
Then in a component: `class="text-brand-500 font-display"`.
|
||
|
||
## Class-order convention
|
||
|
||
For each `class="..."` attribute, order tokens:
|
||
|
||
```
|
||
[layout] → [box] → [typography] → [color] → [state]
|
||
flex items-center gap-2 → w-full p-4 rounded-lg → text-sm font-semibold → text-white bg-brand-500 → hover:bg-brand-600 focus:outline-none
|
||
```
|
||
|
||
Prettier's `prettier-plugin-tailwindcss` enforces this — run it in CI.
|
||
|
||
## Design system integration (ShadCN)
|
||
|
||
- ShadCN 2.x ships v4-native components. No compat layer needed.
|
||
- Custom variants: define once in `@variant` and reuse:
|
||
```css
|
||
@variant hocus (&:hover, &:focus-visible);
|
||
/* class="hocus:bg-brand-500" */
|
||
```
|
||
- Prefer `data-[state=open]:...` variants for stateful ShadCN primitives.
|
||
|
||
## Container queries
|
||
|
||
```html
|
||
<div class="@container/card">
|
||
<p class="@md/card:text-lg text-sm">Adapts to card width, not viewport.</p>
|
||
</div>
|
||
```
|
||
|
||
- Name the container (`/card`) so nested containers don't cross-reference.
|
||
- Breakpoints: `@sm`, `@md`, `@lg`, `@xl` follow the same px values as viewport.
|
||
|
||
## Dark mode
|
||
|
||
`@media (prefers-color-scheme: dark)` is picked up automatically. For a manual toggle, use `dark:` variant + a class or attribute switch on `<html>` (`data-theme="dark"` + `@variant dark (&[data-theme="dark"] *)`).
|
||
|
||
## Anti-patterns
|
||
|
||
- **Bringing back `tailwind.config.js`** for one tweak. Use `@theme` in CSS instead.
|
||
- **Inline styles alongside utility classes** — pick one per element.
|
||
- **`@apply` in component CSS** — allowed but should be rare; utility class in JSX is usually clearer.
|
||
- **Arbitrary values everywhere** — `class="mt-[13px]"` is a code smell if it repeats. Promote to a theme token.
|