メニュー
CSS and styling best practices. Use when working with styles, layouts, or theming.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
SOC 職業分類に基づく
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/oro-ad/nuxt-claude-devtools --skill css-architectureコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
Nuxt 3/4 best practices. Use when working with Nuxt features like pages, composables, layouts, or server routes.
Strict TypeScript practices. Use when writing TypeScript code to ensure type safety.
Vue 3 Composition API expert. Use when working with Vue components, composables, or reactive state.
| name | css-architecture |
| description | CSS and styling best practices. Use when working with styles, layouts, or theming. |
Follow modern CSS architecture patterns:
Use CSS custom properties for theming:
:root {
/* Colors */
--color-primary: #10a37f;
--color-primary-dark: #0d8a6a;
--color-bg: #0f0f0f;
--color-bg-elevated: #1a1a1a;
--color-text: #ffffff;
--color-text-muted: #a0a0a0;
--color-border: #333333;
/* Spacing */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
/* Border Radius */
--radius-sm: 8px;
--radius: 12px;
--radius-lg: 16px;
}
Always use <style scoped> in Vue components:
<style scoped>
.card {
background: var(--color-bg-elevated);
border-radius: var(--radius);
}
</style>
Prefer modern layout methods:
/* Flexbox for 1D layouts */
.row {
display: flex;
gap: var(--space-md);
align-items: center;
}
/* Grid for 2D layouts */
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--space-lg);
}
Start with mobile styles, add breakpoints for larger screens:
.container {
padding: var(--space-md);
}
@media (min-width: 768px) {
.container {
padding: var(--space-lg);
}
}
@media (min-width: 1024px) {
.container {
padding: var(--space-xl);
max-width: 1200px;
margin: 0 auto;
}
}
Use consistent transitions:
.button {
transition: all 0.2s ease;
}
.button:hover {
transform: translateY(-2px);
}
This project uses dark mode by default. For light mode support:
@media (prefers-color-scheme: light) {
:root {
--color-bg: #ffffff;
--color-text: #1f2937;
}
}