菜单
Builds dark-themed TypeScript UIs with accessible color systems, contrast compliance, and responsive design patterns. Use when implementing dark mode or building accessible TypeScript UI components.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/tranhieutt/software_development_department --skill frontend-ui-dark-ts命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Turns real agent failures, repeated prompts, team-specific workflows, and durable project lessons into better SDD skills or memory entries. Use when the user asks to create/update/refine skills, extract reusable lessons, improve skill routing, encode team process, or save patterns for future sessions.
Provides the vendored agent-style v0.3.5 prose rule pack as a portable Claude skill. Use when installing, syncing, applying, or auditing SDD Agent-Style support in another project, or when a style-review workflow needs the bundled rules.
Reviews Markdown prose against the pinned agent-style v0.3.5 rules and optionally writes a polished copy beside the source. Use for specs, ADRs, PR bodies, release notes, and technical docs when prose quality or evidence discipline matters.
基于 SOC 职业分类
正在显示 SKILL.md
| name | frontend-ui-dark-ts |
| type | reference |
| description | Builds dark-themed TypeScript UIs with accessible color systems, contrast compliance, and responsive design patterns. Use when implementing dark mode or building accessible TypeScript UI components. |
| paths | ["**/*.tsx","**/*.ts","**/*.css","**/globals.css","**/tailwind.config.*"] |
| effort | 3 |
| allowed-tools | Read, Glob, Grep, Write, Edit, Bash |
| user-invocable | true |
| when_to_use | When implementing dark mode, designing accessible color systems, or building TypeScript UI components |
prefers-color-scheme media query alone — users need a toggle; sync with localStorage to avoid flash on hydrationhsl(220 15% 10%) not #1a1a2e — HSL lets you programmatically adjust lightness#000) for dark backgrounds — causes eye strain; use hsl(220 15% 8%) insteadcolor-scheme: dark on :root makes browser UI (scrollbars, inputs) follow dark theme/* globals.css */
:root {
/* HSL values only (no hsl() wrapper) — allows opacity modifiers */
--bg-base: 222 47% 8%;
--bg-surface: 222 47% 12%;
--bg-elevated: 222 47% 16%;
--text-primary: 220 20% 95%;
--text-secondary: 220 15% 70%;
--text-muted: 220 10% 50%;
--brand: 220 90% 60%;
--brand-hover: 220 90% 65%;
: ;
: ;
: ;
: dark;
}
{
: ;
: ;
: ;
: ;
: ;
: light;
}
// providers/ThemeProvider.tsx
export function ThemeProvider({ children }: { children: React.ReactNode }) {
const [theme, setTheme] = useState<"dark" | "light">(() =>
typeof window !== "undefined"
? (localStorage.getItem("theme") as "dark" | "light") ?? "dark"
: "dark"
);
useEffect(() => {
document.documentElement.dataset.theme = theme;
localStorage.setItem("theme", theme);
}, [theme]);
return (
<ThemeContext.Provider value={{ theme, toggle: () => setTheme(t => t === "dark" ? "light" : "dark") }}>
{children}
</ThemeContext.Provider>
);
}
// Prevent flash — add to <head> before React hydrates
const themeScript = `
(function() {
var t = localStorage.getItem('theme') || 'dark';
document.documentElement.dataset.theme = t;
})();
`;
// Button with all a11y attributes
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
variant?: "primary" | "ghost" | "danger";
isLoading?: boolean;
}
export function Button({ variant = "primary", isLoading, children, disabled, ...props }: ButtonProps) {
return (
<button
{...props}
disabled={disabled || isLoading}
aria-busy={isLoading}
aria-disabled={disabled || isLoading}
className={cn(
"inline-flex items-center gap-2 rounded-md px-4 py-2 font-medium transition-colors",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--brand))]",
"disabled:pointer-events-none disabled:opacity-50",
variant === "primary" && "bg-[hsl(var(--brand))] text-white hover:bg-[hsl(var(--brand-hover))]",
variant === "ghost" && "hover:bg-[hsl(var(--bg-surface))]",
variant === "danger" && "bg-[hsl(var(--error))] text-white",
)}
>
{isLoading && <Spinner aria-hidden="true" />}
{children}
</button>
);
}
// Use CSS variables with alpha
function token(variable: string, alpha?: number): string {
return alpha !== undefined
? `hsl(var(--${variable}) / ${alpha})`
: `hsl(var(--${variable}))`;
}
// Usage: token("brand", 0.2) → "hsl(var(--brand) / 0.2)"
// tailwind.config.ts
export default {
darkMode: ["class", '[data-theme="dark"]'], // class-based, controlled by JS
theme: {
extend: {
colors: {
bg: {
base: "hsl(var(--bg-base) / <alpha-value>)",
surface: "hsl(var(--bg-surface) / <alpha-value>)",
elevated: "hsl(var(--bg-elevated) / <alpha-value>)",
},
text: {
primary: "hsl(var(--text-primary) / <alpha-value>)",
secondary: "hsl(var(--text-secondary) / <alpha-value>)",
},
brand: "hsl(var(--brand) / <alpha-value>)",
}
}
}
}
// Quick WCAG contrast ratio check
function getContrastRatio(fg: string, bg: string): number {
// parse HSL → luminance → ratio
// Use online tool: https://webaim.org/resources/contrastchecker/
// Or: colord(fg).contrast(colord(bg))
}
// Minimum ratios:
// 4.5:1 → AA normal text
// 3.0:1 → AA large text (18pt+ or 14pt bold), UI components
// 7.0:1 → AAA normal text
| Pitfall | Fix |
|---|---|
| Flash of wrong theme on page load | Add inline script to <head> before hydration |
Using opacity for text variants | Use separate CSS token with correct contrast ratio |
Dark text (gray-900) on dark bg | Always test contrast; use --text-primary token |
| Hover states not visible in dark mode | Ensure hover has ≥3:1 contrast vs default state |
currentColor for icons | Verify icon color passes 3:1 contrast vs background |