메뉴
CSS custom properties, utility classes and theme colors. Use when editing styles, working in app/assets/styles/*, writing <style scoped>, or touching colors, spacing or typography.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | css-system |
| description | CSS custom properties, utility classes and theme colors. Use when editing styles, working in app/assets/styles/*, writing <style scoped>, or touching colors, spacing or typography. |
Global CSS variables, utility classes and styling conventions of the project.
app/assets/styles/variables.css - global custom propertiesapp/assets/styles/reset.css - base reset (box-sizing, fonts, body colors)app/assets/styles/layout.css - layout classes (.page-frame, .page-frame-blog, .section-stack)app/assets/styles/components.css - reusable component classesapp/assets/styles/utilities.css - micro-utilitiesapp/assets/styles/markdown.css - styles for .markdown-bodyapp/assets/styles/global.css - imports all of the above (the only global CSS in nuxt.config)--font-display: 'Epilogue', sans-serif
--font-body: 'Epilogue', sans-serif
--font-mono: 'JetBrains Mono', monospace
--page-max-width: 1200px
--shell-padding: clamp(1.5rem, 2vw, 2.5rem)
--section-gap: clamp(4rem, 8vw, 6rem)
--line-soft: rgba(var(--v-theme-on-surface), 0.15)
--line-strong: rgba(var(--v-theme-on-surface), 0.35)
--surface-faint: rgba(var(--v-theme-on-surface), 0.05)
--surface-mild: rgba(var(--v-theme-on-surface), 0.10)
--text-subtle: rgba(var(--v-theme-on-surface), 0.75)
--text-primary: rgb(var(--v-theme-on-surface))
--bg-soft: rgba(var(--v-theme-surface), 0.85)
--bg-muted: rgba(var(--v-theme-surface), 0.65)
--bg-elevated: rgb(var(--v-theme-surface))
--link: rgb(var(--v-theme-primary))
--link-hover: rgb(var(--v-theme-primary))
--radius-lg: 28px
--radius-md: 18px
--radius-sm: 10px
--transition-fast: 160ms cubic-bezier(0.4, 0, 0.2, 1)
--transition-base: 240ms cubic-bezier(0.4, 0, 0.2, 1)
--transition-slow: 360ms cubic-bezier(0.4, 0, 0.2, 1)
--md-text, --md-muted, --md-bg
--md-code-bg, --md-code-border, --md-code-inline-text
--md-blockquote-bg, --md-blockquote-border
--md-table-border
| Class | Description |
|---|---|
.eyebrow | Uppercase monospace label, text-subtle color |
.section-title | font-size: clamp(2.25rem, 6vw, 3.4rem), letter-spacing: -0.02em |
.section-lead | font-size: 1.15rem, text-subtle color |
.inline-meta | Flex wrap with gap, font-size: 0.95rem |
.plain-sheet | Card with border, radius-md, padding 1.5rem |
.list-rows | Grid with border-bottom separators on each li |
.chipline | Flex wrap of chips with pill border |
.no-outline-button | Pill button with border, no background (hover: surface-faint) |
| Class | Description |
|---|---|
.text-muted | color: var(--text-subtle) |
.mono | font-family: var(--font-mono) |
primary: #859FFF secondary: #5C7EFF accent: #A785FF
background: #0B0E14 surface: #151920 surface-variant: #1F252C
on-surface: #EDF2F7
primary: #3451D9 secondary: #2F29B0 accent: #6600A3
background: #F8F9FC surface: #FFFFFF surface-variant: #E8EBF0
on-surface: #0F1419
rgb(var(--v-theme-*)) to respect dark/lightglobal.css<style scoped lang="scss"> in Vue components (scss available)!important outside of Vuetify overrides.dark class to <html> (see plugins/vuetify.ts)Global Pinia store (useAppStore) for theme and language with cookie persistence. Use when changing theme or language, or touching app/stores/app.ts.
Create/edit blog articles in EN/ES - frontmatter, collections, images, Markdown features. Use when writing content under content/{en,es}/blog/.
Auto-imported global and content components plus layouts (default/blog). Use when using/creating components or working with ContentRenderer.
Project composables - useBlog, usePageSeo, useEnterAnimations, useBlogScroll, useGsapAnimations. Use when consuming blog/SEO/animation logic.
Static data - contact.ts, projects.ts, sidebar-items.ts. Use when displaying contact/projects info or adding navigation items.
GSAP + ScrollTrigger - animateInOnEnter, getMainScroller, useGsapAnimations. Use when adding enter/scroll animations.