SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场frontend-css

frontend-css

前端与建站

查看项目

更新于 10-15 09:52

技能介绍

用途

这是一个统一的前端 Web 知识库技能，用于在编写现代 CSS 和界面设计时提供参考。它覆盖 CSS 架构、UX 心理学、UI 组件、独特美学以及界面设计生成。

主要能力

该技能提供现代 CSS 的编写参考，并附带一个参考文件库，用于深入覆盖特定主题：

  • typography.md：垂直节奏、模块化比例、字体选择、Web 字体加载、流体排版、OpenType 特性
  • color-and-contrast.md：OKLCH 色彩空间、带色调的中性色、调色板结构、WCAG、深色模式、主题化
  • motion-design.md：时长规则、缓动曲线、高级动效素材、减少动效、感知性能
  • heuristics-scoring.md：Nielsen 十大启发式原则，含 0-4 评分标准和 P0-P3 严重程度
  • cognitive-load.md：内在/外在/相关负荷、工作记忆规则、8 种常见违规
  • personas.md：5 种设计评审原型（Alex/Jordan/Sam/Riley/Casey）
  • css-patterns.md：容器查询、颜色操作、SASS、BEM、CSS Modules、焦点、厂商前缀、响应式图片，以及响应式设计基础部分（移动优先、断点、指针检测、安全区域）
  • layout-patterns.md：圣杯、分栏、便当、编辑式不对称、瀑布流、卡片网格配方，以及空间设计原则部分（4pt 间距、层级、容器查询、视觉调整）
  • ui-pattern-guide.md：卡片/列表/表格/图库决策、导航、分页、模态框、空白状态，以及交互设计部分（8 种状态、焦点环、Popover API、锚点定位、键盘导航）
  • ux-patterns.md：引导、信任/社会证明、说服、付费墙、分块，以及 UX 写作部分（按钮标签、错误消息、语气语调、国际化、术语）
  • visual-intensity.md：在单一轴上放大（更大胆）与克制（更安静）：尺度/字重/颜色/空间手法、反 AI 套路式“大胆”、缓动规则
  • delight-and-microinteractions.md：愉悦感的获得时机与场合、微交互、文案个性、加载状态文案（反套路）、庆祝、彩蛋、库
  • production-hardening.md：边缘情况韧性：文本溢出、国际化/RTL 逻辑属性、错误/空/加载状态、验证、无障碍与性能韧性
  • flow-patterns.md：用户流程配方
  • argyle-cacadia-2025-deck.md：Adam Argyle CSS Wrapped 2025 演示文稿（离线副本）
  • token-architecture.md：三层令牌系统（原始 -> 语义 -> 组件）、命名约定、文件组织、W3C DTCG 对齐
  • primitive-tokens.md：第 1 层参考：原始色阶（灰/蓝/状态）、4px 间距刻度、字体刻度、圆角、阴影、动效、z-index
  • semantic-tokens.md：第 2 层参考：基于用途的别名（背景/前景、主/次/弱化/强调/破坏性、状态、边框/环），深色模式覆盖
  • component-tokens.md：第 3 层参考：组件作用域令牌（按钮、输入、卡片、徽章、警告、对话框、表格），引用语义层
  • component-specs.md：组件规格表（按钮、输入、卡片、徽章、警告、对话框、表格），含变体、尺寸、状态、解剖结构
  • states-and-variants.md：交互状态（默认/悬停/焦点/激活/禁用/加载）、状态优先级、过渡、焦点环、错误状态、变体模式、ARIA
  • tailwind-integration.md：CSS 变量 + Tailwind 配置配方、HSL 不透明度格式、组件类、shadcn/ui 对齐

部分参考文件和合并章节源自 pbakaus/impeccable（Apache-2.0）和 nextlevelbuilder/ui-ux-pro-max-skill（MIT）；详见各文件内的署名头。

使用方式

该技能以参考文档形式组织，按主题查阅 references/ 下的文件。正文还包含大量现代 CSS 代码示例，涵盖以下方面：

布局与响应式设计

  • 容器查询：使用 container 和 @container，支持范围语法、容器单位（cqi、cqb、cqw、cqh）、锚定容器查询
  • 媒体查询范围语法：@media (width <= 1024px) 等
  • Grid 增强：子网格（subgrid）、瀑布流（display: grid-lanes，Safari 26 已支持，Chrome 和 Firefox 仍在标志后，需用 @supports 渐进增强）

色彩与主题化

  • color-scheme 与 light-dark() 函数
  • 现代色彩空间：OKLCH、Display-P3、in oklch 渐变
  • 颜色操作：color-mix()、相对颜色语法
  • accent-color

排版

  • 文本换行：text-wrap: balance / pretty
  • text-box: trim-both
  • 流体排版：clamp()
  • 动态视口单位：dvh/dvw、svh/svw、lvh/lvw

动画与动效

  • 滚动驱动动画：animation-timeline: scroll() / view()
  • 视图过渡：@view-transition，跨文档过渡状态为 Limited Availability（Chrome/Safari 18.2+）
  • linear() 高级缓动
  • @starting-style

自定义属性与高级特性

  • @property：类型安全、可动画的自定义属性
  • 数学函数与 calc-size()：可对内在尺寸（auto、min-content）进行计算和过渡
  • 树计数函数（即将推出）：sibling-index()、sibling-count()
  • 条件 CSS if()（即将推出）

架构与组织

  • 级联层：@layer reset, design-system, components, utilities;

交互组件

  • Dialog：commandfor、command 属性，closedby 属性支持轻触关闭
  • Popover：popover=hint，过渡与 @starting-style
  • 锚点定位：anchor-name、position-anchor、position-area、position-try-fallbacks
  • 伪元素：anchor()、::scroll-button()、::scroll-marker()
  • 独占手风琴：details name 属性
  • 可定制 select：appearance: base-select
  • search 元素

表单增强

  • field-sizing: content 自动增长
  • 更好的验证伪类：:user-invalid、:user-valid
  • select 中的 hr

视觉特效

  • 滚动条样式：scrollbar-color、scrollbar-width
  • shape() 函数
  • 圆角形状：corner-shape

渐进增强模式

  • 特性检测：@supports
  • 尊重用户偏好：prefers-reduced-motion、prefers-color-scheme、prefers-contrast
  • 检查浏览器支持：Baseline（Widely Available、Newly Available、Limited Availability）

适用场景

适用于需要编写现代、健壮、高效 CSS 的前端开发与界面设计工作，包括 CSS 架构设计、UX 心理学应用、UI 组件设计、独特美学实现以及界面设计生成。

限制

关于该技能的具体收费、价格、平台支持范围、实际使用效果等信息，资料中暂未提供。部分特性（如树计数函数、条件 CSS if()）标注为“即将推出”，瀑布流在 Chrome 和 Firefox 中仍在标志后，跨文档视图过渡处于 Limited Availability，使用前需检查 Baseline 状态并用 @supports 做渐进增强。