RIPDPI's own Compose conventions: ViewModel pattern, Route/Screen split, DataStore->StateFlow, RipDpiThemeTokens. Use for how this app does Compose, not generic Compose API questions (see compose).
中文简介正在准备中。当前显示原文说明。
po4yka/RIPDPI812026年10月20日 更新
免费在 GitHub 公开
ripdpi-design
Use this skill to generate well-branded interfaces and assets for RIPDPI (an Android-native, Compose-first VPN and DPI-bypass app), either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, brand-ship icons, and an interactive UI kit of every public composable from the live ui/components tree.
中文简介正在准备中。当前显示原文说明。
查看安装方法包含的文件（198）
- SKILL.md4.0 KB
- assets/ic_launcher.png9.7 KB
- assets/icons/ic_article_outline.svg315 B
- assets/icons/ic_launcher_foreground_ripdpi_clean.svg3.0 KB
- assets/icons/ic_launcher_foreground_ripdpi_cracked.svg6.6 KB
- assets/icons/ic_launcher_foreground_ripdpi_disintegrate.svg9.5 KB
- assets/icons/ic_launcher_foreground_ripdpi_glitch.svg8.4 KB
- assets/icons/ic_launcher_foreground_ripdpi_rubble.svg7.8 KB
- assets/icons/ic_launcher_foreground_ripdpi_stitch.svg13.3 KB
- assets/icons/ic_launcher_monochrome_ripdpi.svg3.0 KB
- assets/icons/ic_notification.svg270 B
- assets/icons/ic_settings_outline.svg1.0 KB
- assets/icons/ic_stop_outline.svg153 B
- assets/icons/ic_tune_outline.svg244 B
- assets/icons/ic_vpn_key_outline.svg296 B
- assets/raw/ic_article_outline.xml552 B
- assets/raw/ic_launcher_foreground_ripdpi_clean.xml3.4 KB
- assets/raw/ic_launcher_foreground_ripdpi_cracked.xml7.0 KB
- assets/raw/ic_launcher_foreground_ripdpi_disintegrate.xml10.1 KB
- assets/raw/ic_launcher_foreground_ripdpi_glitch.xml8.7 KB
- assets/raw/ic_launcher_foreground_ripdpi_rubble.xml8.4 KB
- assets/raw/ic_launcher_foreground_ripdpi_stitch.xml13.5 KB
- assets/raw/ic_launcher_monochrome_ripdpi.xml3.4 KB
- assets/raw/ic_notification.xml3.2 KB
- assets/raw/ic_settings_outline.xml1.2 KB
- assets/raw/ic_stop_outline.xml338 B
- assets/raw/ic_tune_outline.xml429 B
- assets/raw/ic_vpn_key_outline.xml481 B
- colors_and_type.css12.0 KB
- COVERAGE.md27.0 KB
- diagnostic-reports-index.html4.8 KB
- fonts/geist_mono_bold.ttf146.8 KB
- fonts/geist_mono_medium.ttf145.7 KB
- fonts/geist_mono_regular.ttf144.9 KB
- fonts/geist_pixel_circle.ttf312.7 KB
- fonts/geist_sans_bold.ttf125.7 KB
- fonts/geist_sans_medium.ttf124.6 KB
- fonts/geist_sans_regular.ttf123.0 KB
- mobile-diagnostic-report.html12.0 KB
- mobile-elements-showcase.html19.3 KB
- mobile-vpn-connection.html12.2 KB
- preview/a11y-color-contrast.html8.3 KB
- preview/a11y-focus-rings.html6.5 KB
- preview/android-crash-screen.html2.3 KB
- preview/android-customization.html3.0 KB
- preview/android-glance-widget.html4.0 KB
- preview/android-history.html2.3 KB
- preview/android-nav-bar.html1.6 KB
- preview/android-nav-rail.html3.2 KB
- preview/android-notif-foreground.html3.4 KB
- preview/android-notif-heads-up.html2.5 KB
- preview/android-notif-lock-screen.html2.3 KB
- preview/android-permission-rationale.html3.0 KB
- preview/android-qs-tile.html2.3 KB
- preview/android-scanner.html1.9 KB
- preview/android-splash.html1.4 KB
- preview/android-split-columns.html2.1 KB
- preview/android-status-bar.html2.9 KB
- preview/android-vpn-permission.html2.0 KB
- preview/brand-launcher-variants.html4.7 KB
- preview/brand-mark.html3.5 KB
- preview/color-anchors.html2.0 KB
- preview/color-destructive.html1.9 KB
- preview/color-edges.html3.4 KB
- preview/color-info.html1.8 KB
- preview/color-neutrals.html3.3 KB
- preview/color-restricted.html1.9 KB
- preview/color-success.html1.8 KB
- preview/color-warning.html1.8 KB
- preview/components-accordion.html6.2 KB
- preview/components-actuator-states.html8.8 KB
- preview/components-actuator.html6.6 KB
- preview/components-analysis-progress.html2.1 KB
- preview/components-bottom-nav.html2.1 KB
- preview/components-bottom-sheet.html2.0 KB
- preview/components-brand-badge.html2.6 KB
- preview/components-buttons.html2.5 KB
- preview/components-card.html2.1 KB
- preview/components-chips.html1.6 KB
- preview/components-cidr-input.html5.0 KB
- preview/components-combobox.html6.8 KB
- preview/components-command-palette.html7.3 KB
- preview/components-dialog.html2.1 KB
- preview/components-diff-viewer.html6.6 KB
- preview/components-dropdown.html2.6 KB
- preview/components-empty-state.html1.6 KB
- preview/components-filter-bar.html5.9 KB
- preview/components-heartbeat-indicator.html6.4 KB
- preview/components-icon-buttons.html3.9 KB
- preview/components-json-tree.html7.7 KB
- preview/components-kbd-shortcut.html4.2 KB
- preview/components-live-counter.html7.3 KB
- preview/components-log-row.html2.5 KB
- preview/components-log-stream.html7.5 KB
- preview/components-metric-pill.html1.7 KB
- preview/components-page-indicators.html1.4 KB
- preview/components-preset-card.html2.0 KB
- preview/components-progress-bar.html4.8 KB
- preview/components-section-header.html1.7 KB
- preview/components-segmented.html4.3 KB
- preview/components-settings-row.html2.0 KB
- preview/components-shimmer.html3.9 KB
- preview/components-slider.html6.6 KB
- preview/components-snackbar.html3.0 KB
- preview/components-spinner.html1.8 KB
- preview/components-stage-progress.html1.9 KB
- preview/components-stale-data-badge.html5.8 KB
- preview/components-status-indicator.html1.9 KB
- preview/components-stepper.html7.0 KB
- preview/components-switch.html1.8 KB
- preview/components-tabs.html4.6 KB
- preview/components-text-action.html2.2 KB
- preview/components-text-field.html1.8 KB
- preview/components-toggle-alternatives.html2.4 KB
- preview/components-tooltip.html2.0 KB
- preview/components-top-app-bar.html2.3 KB
- preview/components-warning-banner.html3.1 KB
- preview/diagnostic-censorship-signature.html8.1 KB
- preview/diagnostic-dns-resolvers.html10.1 KB
- preview/diagnostic-hop-trace.html7.1 KB
- preview/diagnostic-mtu-scan.html7.4 KB
- preview/diagnostic-port-matrix.html7.5 KB
- preview/diagnostic-report-summary.html5.2 KB
- preview/gesture-long-press-menu.html6.9 KB
- preview/gesture-pull-to-refresh.html8.5 KB
- preview/gesture-swipe-actions.html7.4 KB
- preview/icon-set.html2.9 KB
- preview/motion-connection-states.html7.5 KB
- preview/motion-data-ticker.html5.5 KB
- preview/motion-easing-curves.html4.6 KB
- preview/motion-page-transitions.html6.0 KB
- preview/motion-probe-pulse.html5.4 KB
- preview/motion-reduced-motion.html6.7 KB
- preview/motion-skeleton-shimmer.html5.8 KB
- preview/motion-toast-choreography.html8.4 KB
- preview/motion-tokens.html2.8 KB
- preview/onboarding-coach-mark.html7.6 KB
- preview/onboarding-tour-cards.html5.6 KB
- preview/preview.css1.9 KB
- preview/radii.html3.8 KB
- preview/share-bottom-sheet.html5.6 KB
- preview/share-link-preview.html5.1 KB
- preview/share-qr-code.html5.2 KB
- preview/share-result-viewer.html3.5 KB
- preview/share-stats-card.html3.5 KB
- preview/spacing-scale.html3.6 KB
- preview/strokes.html1.3 KB
- preview/touch-targets.html1.9 KB
- preview/type-body.html1.4 KB
- preview/type-brand.html1.2 KB
- preview/type-display.html1.4 KB
- preview/type-mono.html1.4 KB
- preview/type-section-title.html1.3 KB
- preview/vpn-awg-editor.html12.6 KB
- preview/vpn-block-check.html3.5 KB
- preview/vpn-confirm-disconnect.html2.4 KB
- preview/vpn-data-transparency.html3.9 KB
- preview/vpn-degradation-strip.html5.5 KB
- preview/vpn-detection-check.html3.7 KB
- preview/vpn-dns-picker.html3.4 KB
- preview/vpn-export-consent.html3.6 KB
- preview/vpn-first-run-test.html5.1 KB
- preview/vpn-handshake-timeline.html9.7 KB
- preview/vpn-identity-card.html2.8 KB
- preview/vpn-in-app-browser.html3.9 KB
- preview/vpn-kill-switch.html3.7 KB
- preview/vpn-latency-graph.html2.9 KB
- preview/vpn-network-change.html2.9 KB
- preview/vpn-oom-recovery.html2.4 KB
- preview/vpn-pcap-viewer.html3.1 KB
- preview/vpn-per-app-routing.html3.9 KB
- preview/vpn-permission-summary.html3.4 KB
- preview/vpn-presets-gallery.html3.3 KB
- preview/vpn-probe-live.html3.0 KB
- preview/vpn-profile-switcher.html2.9 KB
- preview/vpn-quick-vs-advanced.html3.0 KB
- preview/vpn-reconnect-toast.html5.9 KB
- preview/vpn-relay-picker.html4.0 KB
- preview/vpn-replay-failure.html3.6 KB
- preview/vpn-session-card.html7.2 KB
- preview/vpn-snooze.html2.9 KB
- preview/vpn-state-history.html9.2 KB
- preview/vpn-state-machine.html11.4 KB
- preview/vpn-strategy-ab.html5.0 KB
- preview/vpn-strategy-editor.html4.2 KB
- preview/vpn-strategy-import.html3.6 KB
- preview/vpn-strategy-probe-wizard.html3.8 KB
- preview/vpn-throughput-graph.html3.5 KB
- preview/whats-new-card.html6.1 KB
- README.md19.7 KB
- ui_kits/android/android-frame.jsx9.2 KB
- ui_kits/android/index.html14.2 KB
- ui_kits/android/MobileDiagnosticReport.jsx33.4 KB
- ui_kits/android/MobileElements.jsx34.1 KB
- ui_kits/android/MobileVpnConnection.jsx36.6 KB
- ui_kits/android/README.md3.5 KB
- ui_kits/android/RipDpiComponents.jsx27.1 KB
- ui_kits/android/RipDpiScreens.jsx17.7 KB
SKILL.md（原文）
安装前可以查看交给 AI 代理的指令内容。
RIPDPI Design System skill
Read README.md in this skill first — it covers the register, content
fundamentals, visual foundations, and iconography that the rest depends on.
Then open the other files as you need them.
Where things live
README.md— the contract. Read first.colors_and_type.css— every token as a CSS custom property +@font-facedeclarations for Geist Sans / Mono / Pixel Circle. Use this directly in HTML artifacts.fonts/— TTF files referenced bycolors_and_type.css.assets/icons/— the 6 brand-ship outline icons (SVG, 24×24) and the 6 brand-mark variants (clean / cracked / disintegrate / glitch / rubble / stitch).assets/raw/— Android vector drawable XML originals (kept for parity).preview/— atomic design-system cards. Useful as references but not meant to be linked from production HTML.ui_kits/android/— the production UI kit. JSX recreations of every public composable, wired into a 6-screen click-through. ReadRipDpiComponents.jsxto see the API; readindex.htmlto see screens composed.
How to do work with this skill
For visual artifacts (slides, mocks, throwaway prototypes)
- Copy
colors_and_type.css+fonts/+ any icons you need out of this skill into the artifact folder. - Link
colors_and_type.cssfrom your HTML and consume the tokens viavar(--rdp-…). Don't inline raw hex, raw px, or new font sizes. - If you need component visuals, copy
ui_kits/android/RipDpiComponents.jsxinto the artifact and import it. It self-contains everything: a theme provider, every Compose-analog component, and theRDPtoken bundle. - The register is engineering-tool, not consumer-brand. No gradients, no illustrations, no emoji, no decorative copy, no marketing voice. If you reach for any of those, you're working against the brand.
For production code
- Read
README.mdfor the rules. - Treat the live Kotlin sources at
app/src/main/kotlin/com/poyka/ripdpi/ui/theme/(in the user's codebase, not this skill) as authoritative. The CSS in this skill is a mirror, not the contract. - Extend by adding fields to the matching token data class
(
RipDpiExtendedColors,RipDpiTextStyles,RipDpiShapeMetrics,RipDpi*Metrics,RipDpi*StateTokens,RipDpiSurfaceRoleMappings), never by inlining a raw value.
When invoked without other guidance
Ask the user what they want to build or design. Useful questions:
- Is this a mock / prototype / production code? (Determines fidelity rules.)
- Which screen or surface? (Home, Diagnostics, Strategy config, Logs, Onboarding, or a new screen?)
- Light, dark, or both? (Both are first-class; the kit ships both.)
- Compact, Medium, or Expanded width class? (Default is Compact.)
- Does it need to compose existing
RipDpi*components, or is this a new component that needs to plug intoRipDpiThemeTokens?
Then act as an expert designer who outputs HTML artifacts or production Compose code, depending on the need.
Hard rules (cribbed from README.md)
- 48dp touch-target floor. Non-negotiable.
- No drop shadows — depth via 1dp border or 0.5dp hairline (#666).
- Mono is load-bearing — every machine-readable value (IPs, hex, byte counts, durations, log lines) renders in Geist Mono. Never sans.
- Strings are imperative, sentence case, no second person, no apology, no
marketing voice.
ConnectnotTap to connect now. - No emoji. No unicode-character icons. Sentinel shapes (filled circle, diamond, triangle, square) signal status tone.
- No Material You / dynamic color. Brand identity overrides system accent.
- No tertiary accent colors. Color = semantic state only.
评价
还没有评价。欢迎分享你的使用感受。
评论
无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。
还没有评论。来写第一条吧。
同一仓库的技能
ADB-based RIPDPI device/emulator debugging: build/install/launch, logcat filtering, fixture port-forwarding, instrumented tests, crash/ANR triage. Use when debugging on a real device or emulator.
中文简介正在准备中。当前显示原文说明。
po4yka/RIPDPI812026年10月20日 更新
RIPDPI Appium launch-contract reference: start routes and permission/service/data presets. Use when a test launches to the wrong screen or a new automation route is added. General flakiness: appium-test-debug.
中文简介正在准备中。当前显示原文说明。
po4yka/RIPDPI812026年10月20日 更新
RIPDPI Appium test authoring: page objects, resource-id locators, assertions, wait tiers. Use when writing a new Appium test or page object, or adding coverage for a new screen.
中文简介正在准备中。当前显示原文说明。
po4yka/RIPDPI812026年10月20日 更新
RIPDPI Appium failure triage: flaky tests, locator/session/wait issues, screenshot and element-tree debugging. Use when an Appium test fails or is flaky.
中文简介正在准备中。当前显示原文说明。
po4yka/RIPDPI812026年10月20日 更新
Add or modify a GitHub Actions job. Use when editing a file under .github/workflows/. Not for running a workflow locally (local-ci-act) or release signing (release-signing).
中文简介正在准备中。当前显示原文说明。
po4yka/RIPDPI812026年10月20日 更新