Files
Understand-Anything/understand-anything-plugin/skills/understand/languages/css.md
T
Lum1104andClaude Opus 4.6 4d2cb32232 fix: address comprehensive code review findings for PR #51
Fix all issues from the 5-agent parallel code review of universal file
type support:

- Parser error handling: add console.warn in JSON/YAML catch blocks,
  warn on unbalanced braces in Protobuf/Terraform parsers
- Parser correctness: filter .PHONY special targets in Makefile parser,
  handle opening brace on next line in Shell parser, fix per-stage
  EXPOSE port assignment in Dockerfile parser
- Graph builder: use nodeType-based ID prefix instead of hardcoded
  "file:", warn on unknown definition kinds, detect duplicate node IDs
- Type safety: export NodeType alias, add ServiceInfo.lineRange, type
  dashboard color maps as Record<NodeType,...>, refactor
  getDirectionalLabel to Record<EdgeType,...>, consolidate NodeCategory
- Schema: add StrictLanguageConfigSchema with extensions/filenames
  refinement, fix Infrastructure/Schema-Data category comments
- Agent prompts: fix Jenkinsfile language ID (groovy → jenkinsfile),
  fix css.md edge type (configures → related), remove shell.md
  Makefile cross-reference
- Tests: 20+ new edge case tests across parsers, graph builder,
  language registry, and plugin registry
- Documentation: add JSDoc to all 12 parser classes

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-28 21:55:20 +08:00

2.0 KiB

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 @uses 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."