Skip to content
Back to skills

Pf Glass Check

ASecurity

Implement and audit PatternFly Glass Mode screens using the Glass Mode handbook. Use whenever a user mentions Glass Mode while building, generating, editing, or reviewing PatternFly screens, UIs, or prototypes, including Project Felt with glass. Prevent nested glass, preserve default card styling with optional isPlain, and apply accessibility and background image rules from the start.

  • 9 stars
  • 0 votes
  • 0 copies
  • 1 view
  • Added September 21, 2026
designreact

Security analysis

A100/100

Pro scans all 13 files and shows the line behind each finding

Scanned September 21, 2026

npx -y skills add rh-uxd/ai-helpers --skill pf-glass-check --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Pf Glass Check?

Add the live security badge to your README. It updates with every re-scan.

Security grade badge for Pf Glass Check
[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/rh-uxd-pf-glass-check/badge)](https://www.skillsdirectory.com/skills/rh-uxd-pf-glass-check)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro
SKILL.md
---
name: pf-glass-check
description: Implement and audit PatternFly Glass Mode screens using the Glass Mode handbook. Use whenever a user mentions Glass Mode while building, generating, editing, or reviewing PatternFly screens, UIs, or prototypes, including Project Felt with glass. Prevent nested glass, preserve default card styling with optional isPlain, and apply accessibility and background image rules from the start.
---

## Use the handbook first

When a prompt includes Glass Mode for a PatternFly screen, use this skill during implementation without waiting for an audit request. Before generating, editing, or auditing React, HTML, CSS, or SCSS, read [the handbook](references/glass-handbook.md), including its decision table, audit scope, and rules. It is the source of detailed component behavior, examples, accessibility requirements, tokens, and background guidance.

## Essential behavior

- Never nest glass surfaces.
- Prefer default cards; `isPlain` is optional. Preserve explicit styling choices and do not require confirmation before proceeding.
- Overlay drawers never use `isGlass`, regardless of parent.
- Inline drawers inside glass parents require `isPlain` on `DrawerPanelContent`, without `isGlass`.

## Workflow and delivery

1. Establish theme enablement and identify glass parents before selecting component props.
2. Apply the handbook while implementing; review the resulting component tree and styles against its rules in severity order before delivery.
3. For implementation, deliver the code and briefly summarize glass decisions and validation.
4. For an audit or unresolved implementation violations, read [the audit report format](references/audit-report.md) and report actionable findings with locations and corrected examples.

Files in this skill

  • SKILL.md1.7 KB
  • eval/cases/glass-on-glass-violation/GlassPage.tsx510 B
  • eval/cases/glass-on-glass-violation/annotations.yaml78 B
  • eval/cases/glass-on-glass-violation/input.yaml143 B
  • eval/cases/plain-on-glass-pass/PlainCardPage.tsx521 B
  • eval/cases/plain-on-glass-pass/annotations.yaml75 B
  • eval/cases/plain-on-glass-pass/input.yaml147 B
  • eval/cases/standalone-glass-valid/StandaloneGlassCard.tsx558 B
  • eval/cases/standalone-glass-valid/annotations.yaml77 B
  • eval/cases/standalone-glass-valid/input.yaml149 B
  • eval/eval.yaml4.6 KB
  • references/audit-report.md1.3 KB
  • references/glass-handbook.md17.7 KB

Attribution

Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.

Comments

Loading comments…

Newsletter

Get the weekly list of safe new skills, and the ones we pulled.