FrontendHTML

Liquid Glass

by coco-research

Liquid Glass is a Frontend skill for Claude Code, published by coco-research in coco.

218 stars11 forkson coco-research/cocoAdded 2026/09/04Repository updated 2026/09/03
agent-skillsagents-mdaiai-agentsclaude-codecodexcursordeveloper-toolsllm-toolsmcppm-toolsproduct-managementproductivityprompt-engineeringworkflow-automation
Install in seconds
Install Liquid Glass
Copy Liquid Glass into your Claude Code skills folder. Run the command in your terminal, or review the source on GitHub before installing.
terminal
npx degit https://github.com/coco-research/coco/tree/main/skills/axiom-liquid-glass ~/.claude/skills/axiom-liquid-glass

Requires Node.js. Downloads this skill only — not the rest of the repository — into your Claude Code skills folder.

Without Node.js

git clone https://github.com/coco-research/coco.git

Clones the whole repository, then copy the skill’s own directory into your skills folder yourself.

In this catalog

Source file
skills/axiom-liquid-glass/SKILL.md in coco-research/coco
Installs to
~/.claude/skills/axiom-liquid-glass
Collection
One of 25 skills cataloged from this repository
Category
Frontend641 skills

What Liquid Glass does

Liquid Glass guides Apple-style glass UI design, implementation, and review for iOS, iPadOS, macOS, and visionOS. Use it when adding glass materials, choosing variants, or checking legibility and performance.

Liquid Glass is cataloged under Frontend on DirSkills. Liquid Glass comes from a repository tagged agent-skills, agents-md, ai, ai-agents and claude-code.

Documentation

README

Liquid Glass — Apple's Design System

When to Use This Skill

  • Implementing Liquid Glass effects in your app
  • Reviewing existing UI for Liquid Glass adoption opportunities
  • Debugging visual artifacts with Liquid Glass materials
  • Optimizing Liquid Glass performance
  • Requesting expert review of Liquid Glass implementation
  • Redesigning a mobile app UI to feel iOS-native with glass materials
  • Understanding Regular vs Clear variants, tinting, legibility
  • Conducting design reviews with professional push-back frameworks

Part 1: Design Philosophy

Core Principles

This is the opening of the README. Read the full README on GitHub.

Frequently asked about Liquid Glass

  • What else does coco-research publish alongside Liquid Glass?

    Liquid Glass is one of 25 skills that DirSkills catalogs from coco-research/coco, the repository it ships in. Its siblings there include AI Marketing Videos, AI Product Development and API Design Principles. Each one is a separate skill with its own page in this directory, installs the same way Liquid Glass does, and is maintained by coco-research in that same repository. The rest of the collection is listed on the coco-research/coco page.

  • How does Liquid Glass compare to other Frontend skills?

    Liquid Glass ranks #588 by stars among the 641 Frontend skills in this catalog. The most-starred ones next to it are Angular Developer, Android Clean Architecture and Accessibility. DirSkills ranks by the star count of the repository each skill ships in, so that order reflects how popular those repositories are rather than any review of Liquid Glass against them. Open each page to compare what they document and how they install.

More from coco-research/coco

Liquid Glass is one of 25 skills cataloged on DirSkills from coco-research/coco.

See all 25 skills
🎬
2h ago

AI Marketing Videos

AI Marketing Videos creates marketing videos for ads, promos, launches, and brand content. Use it to generate product demos, explainers, social ads, testimonials, and voiceover-backed video workflows.
AI Engineering
21811
🤖
2h ago

AI Product Development

AI Product Development helps ship production-grade AI features with LLM integration, RAG, prompt engineering, streaming, safety guardrails, and cost control. It is used when building AI products that need structured outputs, validation, and user trust.
AI Engineering
21811
🔗
2h ago

API Design Principles

API Design Principles helps you design and review REST and GraphQL APIs with clear resources, methods, versioning, pagination, and error handling. Use it when defining API standards or improving existing endpoints.
AI Engineering
21811
2h ago

Agent Lightning

Agent Lightning trains AI agents with reinforcement learning, prompt optimization, and supervised fine-tuning. Use it to instrument agents with traces, configure LightningStore, define rewards, and run RL or APO training loops.
AI Engineering
21811
🏛️
2h ago

Arb Review

Arb Review generates an 11-slide architecture review board deck from PRD, architecture maps, and project context. Use it to prepare a sign-off presentation with diagrams, risks, NFRs, and a decision ask.
AI Engineering
21811
🗺️
2h ago

Arch Index

Arch Index builds and validates .arch/index.json, a commit-pinned map from architectural components to the real files that implement them. It is used to find component implementation files and detect when architecture docs drift from the code.
Automation
21811