cosmosh-ui-patterns
Cosmosh renderer UI design and interaction workflow for implementing, refactoring, or reviewing React/Tailwind/Radix UI work in the Cosmosh Electron app. Use when touching packages/renderer UI, pages, layout, tabs, SSH terminal interactions, SFTP/browser-like workflows, settings surfaces, visual tokens, CSS/Tailwind classes, Radix wrappers, localization, or UI/UX documentation for Cosmosh.
Best use case
cosmosh-ui-patterns is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Cosmosh renderer UI design and interaction workflow for implementing, refactoring, or reviewing React/Tailwind/Radix UI work in the Cosmosh Electron app. Use when touching packages/renderer UI, pages, layout, tabs, SSH terminal interactions, SFTP/browser-like workflows, settings surfaces, visual tokens, CSS/Tailwind classes, Radix wrappers, localization, or UI/UX documentation for Cosmosh.
Teams using cosmosh-ui-patterns should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/cosmosh-ui-patterns/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How cosmosh-ui-patterns Compares
| Feature / Agent | cosmosh-ui-patterns | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Cosmosh renderer UI design and interaction workflow for implementing, refactoring, or reviewing React/Tailwind/Radix UI work in the Cosmosh Electron app. Use when touching packages/renderer UI, pages, layout, tabs, SSH terminal interactions, SFTP/browser-like workflows, settings surfaces, visual tokens, CSS/Tailwind classes, Radix wrappers, localization, or UI/UX documentation for Cosmosh.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
SKILL.md Source
# Cosmosh UI Patterns Use this skill to keep Cosmosh UI work aligned with the product identity: a high-performance, high-information-density SSH/SFTP client for power users. ## Start Here Before changing UI code: 1. Read `AGENTS.md`, `docs/README.md`, and `docs/developer/design/ui-ux-standards.md`. 2. Inspect the exact page/component being changed and at least one nearby established pattern. 3. Use `pnpm` for project commands and respect the existing package boundaries. 4. Keep implementation files, docs, and localization synchronized in the same task when behavior, UX standards, IPC, or runtime contracts change. For detailed guidance, load only the reference you need: - `references/design-system.md`: tokens, Tailwind, Radix wrappers, typography, density, icons, and styling rules. - `references/interaction-workflows.md`: page workflows, tabs, SSH terminal interactions, settings, localization, docs sync, and validation. ## Default UI Workflow 1. Locate the feature owner. - Shared primitives: `packages/renderer/src/components/ui/*`. - Shared workbench layout: `packages/renderer/src/components/layout/*`. - App shell/tabs: `packages/renderer/src/App.tsx`, `packages/renderer/src/components/header/*`, `packages/renderer/src/lib/useTabs.ts`. - SSH terminal: `packages/renderer/src/pages/SSH.tsx`, `packages/renderer/src/pages/ssh/*`, `packages/renderer/src/components/terminal/*`. - Home/server organization: `packages/renderer/src/pages/Home.tsx`, `packages/renderer/src/components/home/*`. - Settings: `packages/renderer/src/pages/Settings.tsx`, `packages/renderer/src/pages/settings-registry.ts`. 2. Reuse an existing wrapper or style map before creating anything new. 3. Keep page code focused on feature state and composition; move reusable behavior into hooks or shared components when repetition becomes real. 4. Keep UI copy localized through renderer i18n helpers and resource files. 5. Validate loading, empty, disabled, error, hover, focus, active, and narrow viewport states. ## Hard Rules - Do not introduce ad-hoc colors, shadows, blur, or radius values in feature code. - Do not bypass Cosmosh UI wrappers with raw Radix primitives in pages. - Do not use marketing-style landing-page layouts, low-density hero sections, or decorative UI that competes with terminal/server workflows. - Do not remount runtime-heavy pages such as SSH/xterm sessions for visual-only state changes like tab reorder. - Do not silently no-op unfinished actions; disable them with explicit feedback or present a clear coming-soon state. - Do not change cross-process, IPC, backend runtime, persistent data, or security boundaries without an implementation brief and approval. ## Completion Checklist Before finishing UI work: 1. Styling flows through tokens, CSS variables, Tailwind mappings, and wrappers. 2. Interactions are keyboard-accessible and preserve focus behavior. 3. Runtime-heavy views preserve state across tab order and layout-only changes. 4. UI strings are localized; user-visible copy is not hard-coded. 5. Required English and Chinese docs are synchronized when behavior or standards change. 6. Run targeted validation, normally `pnpm lint` and the relevant package/type/test command used by the repo.
Related Skills
vercel-composition-patterns
React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.
web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
vercel-react-native-skills
React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.
vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
google-review-conflict-resolution
Resolve reviewer-author disagreement using Google-style code review conflict workflow. Use when review comments stall, standards are disputed, or escalation is needed. Produces evidence-based consensus steps, escalation path, and documented final decision.
google-code-reviewer
Run a Google-style code review workflow for pull requests and changelists. Use when reviewing design, correctness, tests, readability, comments, documentation, review speed, and comment severity (Required/Nit/Optional/FYI). Includes decision branches for large CLs, major design problems, and LGTM with comments.
google-cl-author
Prepare and iterate changelists/pull requests using Google-style author practices. Use when writing clear CL descriptions, splitting large changes, bundling tests, handling reviewer comments, and keeping dependent CLs build-safe.
detecting-mimikatz-execution-patterns
Detect Mimikatz execution through command-line patterns, LSASS access signatures, binary indicators, and in-memory detection of known modules.
detecting-beaconing-patterns-with-zeek
Performs statistical analysis of Zeek conn.log connection intervals to detect C2 beaconing patterns. Uses the ZAT library to load Zeek logs into Pandas DataFrames, calculates inter-arrival time standard deviation, and flags periodic connections with low jitter. Use when hunting for command-and-control callbacks in network data.
detecting-anomalous-authentication-patterns
Detects anomalous authentication patterns using UEBA analytics, statistical baselines, and machine learning models to identify impossible travel, credential stuffing, brute force, password spraying, and compromised account behaviors across authentication logs. Activates for requests involving authentication anomaly detection, login behavior analysis, UEBA implementation, or suspicious sign-in investigation.
analyzing-cloud-storage-access-patterns
Detect abnormal access patterns in AWS S3, GCS, and Azure Blob Storage by analyzing CloudTrail Data Events, GCS audit logs, and Azure Storage Analytics. Identifies after-hours bulk downloads, access from new IP addresses, unusual API calls (GetObject spikes), and potential data exfiltration using statistical baselines and time-series anomaly detection.
vercel-composition-patterns
React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.