skezu/openai-ui-sdk-mastery
skills/openai-ui-sdk-mastery/SKILL.md
Expert UI component builder and OpenAI SDK integrator. Use when building or refactoring React components using the `@openai/apps-sdk-ui` library to ensure visual consistency, logic-driven variant selection, and adherence to specific workspace conventions (Anti-Pill rule, uniform icons).
development
Updated Jun 2, 2026
$ install --global
skillsauthnpx skillsauth add skezu/skills openai-ui-sdk-masteryInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Jun 2, 2026, 3:42 AM150.2s38 files scanned
SKILL.md
- name:
- openai-ui-sdk-mastery
- description:
- Expert UI component builder and OpenAI SDK integrator. Use when building or refactoring React components using the `@openai/apps-sdk-ui` library to ensure visual consistency, logic-driven variant selection, and adherence to specific workspace conventions (Anti-Pill rule, uniform icons).
OpenAI UI SDK Mastery
This skill guides the implementation of UI components using the OpenAI Apps SDK UI library, enforcing the "coding DNA" of the project.
Core Mandates
Logic-Driven Variant Selection
- Status & Feedback: Use
softvariant forBadgeandAlertto indicate state (success, danger, info) without overwhelming visual noise. - Navigational Actions: Use
ghostvariant for buttons that trigger menus, sidebars, or secondary actions. - Primary Actions: Use
solidvariant sparingly for the main call-to-action on a page.
The "Anti-Pill" Rule
- Standard UI Elements: Set
pill={false}(rectilinear style) for all sidebar items, list items, and standard navigation buttons. - Exceptions:
pill={true}is reserved exclusively for high-impact Call-To-Action (CTA) buttons that need to stand out.
Icon Constraints
- Single Icon Buttons: Always use the
uniformprop onButtonwhen it contains only an icon. - List Integrations: Use
iconSize="sm"(16px) for icons embedded in lists, menus, or compact rows. - Standalone Icons: In sidebars or headers,
iconSize="lg"may be used for primary navigation toggles.
Component Selection Map
| Intent | Recommended Component | Variant | Props |
| :--- | :--- | :--- | :--- |
| Status / Category | Badge | soft | color based on state |
| Blocker / Critical Error | Alert | soft | color="danger" |
| Sidebar Navigation | Button | ghost | pill={false}, block |
| List Action (e.g. Delete) | Button | ghost | uniform, pill={false}, iconSize="sm" |
| User Profile | Avatar | - | size={32} for sidebar, size={26} for menu items |
Resources
Detailed component documentation and examples are available in the references/ directory:
- General Rules
- Components Guide
- Concepts & Primitives
- Transitions & Animations
Implementation Workflow
- Identify Intent: Determine if you are showing status, a navigational action, or a primary CTA.
- Apply DNA: Consult the Anti-Pill and Icon constraints before finalizing component props.
- Validate Consistency: Ensure the new component matches existing patterns in
Sidebar.tsxorHistoryList.tsx.
Related Skills
skezu/pptx
documentation
VerifiedTrustedCommunity
Use this skill any time a .pptx file is involved in any way — as input, output, or both. This includes: creating slide decks, pitch decks, or presentations; reading, parsing, or extracting text from any .pptx file (even if the extracted content will be used elsewhere, like in an email or summary); editing, modifying, or updating existing presentations; combining or splitting slide files; working with templates, layouts, speaker notes, or comments. Trigger whenever the user mentions "deck," "slides," "presentation," or references a .pptx filename, regardless of what they plan to do with the content afterward. If a .pptx file needs to be opened, created, or touched, use this skill.
SKILL.mdUpdated Jun 2, 2026
skezu/pdf
content-media
VerifiedTrustedCommunity
Use this skill whenever the user wants to do anything with PDF files. This includes reading or extracting text/tables from PDFs, combining or merging multiple PDFs into one, splitting PDFs apart, rotating pages, adding watermarks, creating new PDFs, filling PDF forms, encrypting/decrypting PDFs, extracting images, and OCR on scanned PDFs to make them searchable. If the user mentions a .pdf file or asks to produce one, use this skill.
SKILL.mdUpdated Jun 2, 2026
skezu/n8n-workflows-master
tools
VerifiedTrustedCommunity
A skill for designing, building, validating, and securing n8n automation workflows, using specialized AI personas (Build Captain, QA, Security Architect). Use this skill to create production-ready n8n workflows from plain language specifications.
SKILL.mdUpdated Jun 2, 2026
skezu/minimalist-frontend-logic
development
VerifiedTrustedCommunity
Expert guide for building minimalist, high-end interfaces. Use when: (1) General frontend coding, (2) Layout discussions, (3) Polishing UI/UX. Enforces the Item-over-Card pattern, standardized spacing, and proper component categorization.
SKILL.mdUpdated Jun 2, 2026