メニュー
Neubrutalism design system skill. Use when building bold UI with thick borders, offset solid shadows, high saturation colors, and minimal border radius.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/fengshao1227/ccg-workflow --skill neubrutalismコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SEO 增长引擎。GSC 分析、关键词研究、标题优化、多语言翻译、内链策略、技术审计。当用户提到 SEO、CTR、曝光、踩词、优化标题、搜索排名、GSC、内链、写博客、翻译文章时路由到此。
CCG Skills - Quality gates, documentation generator, and multi-agent orchestration. Auto-installed by CCG workflow system.
AI/LLM 能力索引。Agent 开发、LLM 安全、RAG 系统。当用户提到 AI、LLM、Agent、RAG、Prompt 时路由到此。
SOC 職業分類に基づく
SKILL.md を表示中
| name | neubrutalism |
| description | Neubrutalism design system skill. Use when building bold UI with thick borders, offset solid shadows, high saturation colors, and minimal border radius. |
| license | MIT |
| user-invocable | false |
| disable-model-invocation | false |
3–5px solid black outlines on all elementsbox-shadow with zero blur (e.g. 5px 5px 0 #000)0–8px border-radius; sharp or barely rounded cornersReference: references/tokens.css
@import 'references/tokens.css';
.nb-card {
background: var(--nb-yellow);
border: var(--nb-border-thick);
border-radius: var(--nb-radius);
box-shadow: var(--nb-shadow);
}
.nb-card {
background: var(--nb-white);
border: var(--nb-border-thick);
border-radius: var(--nb-radius);
box-shadow: var(--nb-shadow);
padding: 1.5rem;
}
.nb-btn {
background: var(--nb-yellow);
border: var(--nb-border);
border-radius: var(--nb-radius);
box-shadow: var(--nb-shadow-sm);
padding: 0.6rem 1.4rem;
font-family: var(--nb-font);
font-weight: var(--nb-font-weight);
cursor: pointer;
transition: transform 0.1s, box-shadow 0.1s;
}
.nb-btn:hover {
transform: translate(-2px, -2px);
box-shadow: var(--nb-shadow);
}
.nb-btn:active {
transform: translate(3px, 3px);
box-shadow: none;
}
.nb-nav {
background: var(--nb-bg);
border-bottom: var(--nb-border-thick);
padding: 1rem 2rem;
position: sticky;
top: 0;
z-index: 100;
}
.nb-input {
background: var(--nb-white);
border: var(--nb-border);
border-radius: var(--nb-radius);
box-shadow: var(--nb-shadow-sm);
padding: 0.6rem 1rem;
font-family: var(--nb-font);
font-weight: var(--nb-font-weight-body);
}
.nb-input:focus {
outline: none;
box-shadow: var(--nb-shadow);
}
.nb-badge {
background: var(--nb-pink);
border: var(--nb-border);
border-radius: var(--nb-radius);
padding: 0.2rem 0.8rem;
font-family: var(--nb-font);
font-weight: var(--nb-font-weight);
font-size: 0.85rem;
}
font-weight: 700, letter-spacing: -0.02emfont-weight: 500h1, h2, h3 {
font-family: var(--nb-font-heading);
font-weight: var(--nb-font-weight);
letter-spacing: var(--nb-letter-spacing);
}
body {
font-family: var(--nb-font);
font-weight: var(--nb-font-weight-body);
}
transform shifts — provide prefers-reduced-motion fallback@media (prefers-reduced-motion: reduce) {
.nb-btn:hover, .nb-btn:active {
transform: none;
}
}