cc74ad0bd0
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed
- .woodpecker.yaml: image paths -> library/autojanet-{agent,dispatcher}
- .woodpecker.yaml: secret names RS_HARBOR_USER / RS_HARBOR_PASS (global)
- container/Dockerfile: restore COPY skills/, skills/ populated from opencode config
- skills/: 84 opencode skills bundled into image
- k8s/manifests: update image refs to library/
37 lines
2 KiB
Markdown
37 lines
2 KiB
Markdown
# CSS Language Prompt Snippet
|
|
|
|
## Key Concepts
|
|
|
|
- **Selectors**: Element, class (`.name`), ID (`#name`), attribute (`[attr]`), and pseudo-class (`:hover`) targeting
|
|
- **Specificity**: Inline > ID > Class > Element cascade priority determining which rules win
|
|
- **Box Model**: `margin`, `border`, `padding`, `content` dimensions controlling element sizing
|
|
- **Flexbox**: `display: flex` with `justify-content`, `align-items` for one-dimensional layouts
|
|
- **Grid**: `display: grid` with `grid-template-columns/rows` for two-dimensional layouts
|
|
- **Custom Properties (Variables)**: `--name: value` with `var(--name)` for reusable design tokens
|
|
- **Media Queries**: `@media (max-width: ...)` for responsive design breakpoints
|
|
- **SCSS/Sass Features**: Nesting, `$variables`, `@mixin`, `@include`, `@extend`, `@use`, `@forward`
|
|
- **CSS Modules**: Scoped class names (`.module.css`) preventing global style collisions
|
|
- **Cascade Layers**: `@layer` for explicit control over cascade ordering
|
|
|
|
## Notable File Patterns
|
|
|
|
- `*.css` — Standard CSS stylesheets
|
|
- `*.scss` / `*.sass` — Sass/SCSS preprocessor files
|
|
- `*.less` — Less preprocessor files
|
|
- `*.module.css` / `*.module.scss` — CSS Modules (scoped styles)
|
|
- `globals.css` / `reset.css` / `normalize.css` — Global base styles
|
|
- `tailwind.config.js` — Tailwind CSS configuration (though a JS file)
|
|
- `variables.scss` / `_variables.scss` — Design token definitions
|
|
|
|
## Edge Patterns
|
|
|
|
- CSS files are `related` to the HTML or component files that import them for styling
|
|
- SCSS partial files (`_*.scss`) are `depends_on` by the main stylesheet that `@use`s them
|
|
- CSS variable definition files are `related` to all stylesheets that reference those variables
|
|
- CSS Modules are `related` to the component files that import them
|
|
|
|
## Summary Style
|
|
|
|
> "Global stylesheet defining CSS custom properties for the design system color palette and typography."
|
|
> "Responsive layout styles with flexbox and grid for the dashboard page across 3 breakpoints."
|
|
> "SCSS partial defining shared mixins for spacing, shadows, and media query breakpoints."
|