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]>
2.7 KiB
2.7 KiB
name, description, when_to_use, tags
| name | description | when_to_use | tags | ||||
|---|---|---|---|---|---|---|---|
| tailwind-v4-idioms | TailwindCSS v4 (4.3.3 as of 2026-07) — CSS-first config, no tailwind.config.js by default, container queries, custom variants. | You're authoring styles in a TailwindCSS v4 project. Frontend team pins this. |
|
TailwindCSS v4 (4.3.3)
What changed vs v3
- CSS-first config. No
tailwind.config.jsby default. Theme tokens live in your CSS via@theme { ... }. @import "tailwindcss"replaces the three@tailwind base/components/utilitiesdirectives.- Zero-config content detection — scans automatically via the Vite/PostCSS plugin, no
content: [...]glob. - Native CSS variables everywhere — every design token is a
--color-primarystyle var, usable in raw CSS. - Container queries built-in —
@container/namevariant, no plugin. - Faster — Rust-powered engine (Oxide), ~100× faster incremental builds.
Minimal setup
/* 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
@variantand reuse:@variant hocus (&:hover, &:focus-visible); /* class="hocus:bg-brand-500" */ - Prefer
data-[state=open]:...variants for stateful ShadCN primitives.
Container queries
<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,@xlfollow 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.jsfor one tweak. Use@themein CSS instead. - Inline styles alongside utility classes — pick one per element.
@applyin 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.