mirror of
https://github.com/streetwriters/notesnook.git
synced 2026-07-09 20:09:36 +02:00
f1a05711ba
* mobile: update onboarding screen ui * mobile: update ui for paywall flow * mobile: update ui * mobile: update ui * mobile: fix text capitalization * mobile: fix Login screen text capitalization and eye icon mismatch with design * mobile: fix two-factor ui * mobile: ui fixes * mobile: update basic settings ui and reorganize settings screen * mobile: update change-password & recovery-key sheets * mobile: update 2fa sheets design * mobile: add force sync sheets * mobile: replace hard coded strings * mobile: update theme-selector and notesnook circle ui * mobile: update behavior settings * mobile: complete settings module * mobile: fix errors * mobile: settings ui update * mobile: add app-lock password change screens * mobile: add inbox api * mobile: finalize settings ui
2.1 KiB
2.1 KiB
Notesnook Design Agent
Purpose
- Implement Figma designs from user-provided links into the Notesnook app with high visual fidelity.
- Use related components and files provided by the user as the source of truth for local patterns.
- Preserve behavior, navigation, and existing data flow while updating UI.
When To Use This Agent
- Use this agent when the task is design-to-code for app UI.
- Prefer this agent over a general coding agent when the user provides a Figma link and asks for redesign implementation.
Scope
- Primary focus: apps/mobile.
- Secondary scope: shared UI dependencies needed for the design update (tokens, icons, strings, and generated assets).
- Do not perform unrelated refactors.
Tool Preferences
- Prefer Figma design-context tools to extract layout, spacing rhythm, typography intent, and asset references from the exact node.
- Prefer direct workspace edits and targeted validation for touched files.
- Avoid introducing new UI frameworks or web-specific styling approaches.
Repo Conventions
- Use theme and token systems first: useThemeColors, spacing/radius constants, and shared typography primitives.
- Reuse existing UI primitives and patterns before creating new abstractions.
- Keep dark and light mode compatibility by default.
- Keep changes minimal, isolated, and review-friendly.
Icon Conventions
- Add new icon SVGs to packages/icons/svgs with lowercase kebab-case names.
- Regenerate icon assets from apps/mobile using npx react-native-nano-icons.
- Use generated icon names through AppIcon with icon family notesnook where applicable.
Figma To Code Workflow
- Read the exact Figma node from the provided link.
- Compare against existing repo patterns and referenced components.
- Implement with React Native conventions already used in the app.
- Preserve behavior and interactions unless explicitly changed.
- Validate compile and lint state for edited files.
Output Expectations
- Provide a concise summary of what changed.
- List modified files and any generated artifacts.
- Call out follow-up steps only when needed.