See the best posts from any Bluesky account
Enable Content Security Policy with directives tailored for Alpine.js and Bluesky CDN
CSP was disabled — this enables it with self-only defaults, unsafe-eval for Alpine.js
(which uses new Function()), unsafe-inline for Alpine's dynamic styles, and allowlisted
Bluesky image/video CDN domains. Also adds design context to AGENTS.md.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
+58
-16
+21
.impeccable.md
+21
.impeccable.md
···
1
+
## Design Context
2
+
3
+
### Users
4
+
Bluesky users — primarily comics/funny posters, journalists, and anyone who posts for the joy of it. They come for a quick dopamine hit: "what's my best stuff?" Usage is fast and casual — check your top posts, maybe share a screenshot, move on. As the product matures, it becomes stickier: global leaderboards, in-app faving/reposting, post-of-the-day features, and milestone notifications via Bluesky DM ("congrats on the 1000 heart post").
5
+
6
+
### Brand Personality
7
+
**Simple, soft, fun.** The interface should feel like social media at its best — lighthearted, rewarding, zero friction. Not a dashboard. Not an analytics tool. A place where discovering your best posts genuinely makes you smile. Think of it as a trophy case that doesn't take itself too seriously.
8
+
9
+
### Aesthetic Direction
10
+
- **Tone:** Minimal foundation with playful, deliberate details. Clean enough to feel fast, warm enough to feel human. Small animations that reward interaction — not spectacle, just little moments of delight.
11
+
- **Reference:** Bluesky's visual language is a natural touchpoint — the airy feel, the rounded shapes, the blue. skystar.social should feel like it belongs in the same ecosystem without being a clone. It's the fun neighbor, not the corporate sibling.
12
+
- **Anti-references:** Dense analytics dashboards. Dark-mode-with-neon "hacker" aesthetics. Anything that makes social media feel like work.
13
+
- **Theme:** Light mode primary, dark mode supported. Both should feel equally considered.
14
+
- **Color anchors:** Bluesky blue and heart red as the two emotional poles — discovery and appreciation. Neutrals should feel warm, not clinical.
15
+
16
+
### Design Principles
17
+
1. **Fast to feel, not just fast to load.** Every interaction should feel instant and rewarding. Optimistic UI, snappy transitions, no waiting states that feel like waiting.
18
+
2. **Delight in the details.** The big picture is simple. The magic is in the small things — a subtle animation when a post appears, the way numbers count up, the warmth of the color palette.
19
+
3. **Social media should be fun.** This is a celebration of good posts, not a performance report. The tone is congratulatory, never judgmental. Empty states are encouraging, not clinical.
20
+
4. **Belong to the Bluesky world.** Users should feel at home coming from Bluesky. Respect their visual vocabulary — rounded shapes, airy spacing, familiar blue — while adding skystar's own personality.
21
+
5. **Simple until it isn't.** Start minimal. As features like leaderboards, post-of-the-day, and notifications arrive, the design system should accommodate complexity without losing its lightness.
+22
AGENTS.md
+22
AGENTS.md
···
78
78
- Tests split into `tests/unit/` and `tests/functional/`.
79
79
- ClickHouse tests use real ClickHouse (docker compose). Never mock it — always drain query result streams to avoid hangs.
80
80
- Fixtures live next to specs (e.g. `clickhouse_store_fixtures.ts`).
81
+
82
+
## Design Context
83
+
84
+
### Users
85
+
Bluesky users — primarily comics/funny posters, journalists, and anyone who posts for the joy of it. They come for a quick dopamine hit: "what's my best stuff?" Usage is fast and casual — check your top posts, maybe share a screenshot, move on. As the product matures, it becomes stickier: global leaderboards, in-app faving/reposting, post-of-the-day features, and milestone notifications via Bluesky DM ("congrats on the 1000 heart post").
86
+
87
+
### Brand Personality
88
+
**Simple, soft, fun.** The interface should feel like social media at its best — lighthearted, rewarding, zero friction. Not a dashboard. Not an analytics tool. A place where discovering your best posts genuinely makes you smile. Think of it as a trophy case that doesn't take itself too seriously.
89
+
90
+
### Aesthetic Direction
91
+
- **Tone:** Minimal foundation with playful, deliberate details. Clean enough to feel fast, warm enough to feel human. Small animations that reward interaction — not spectacle, just little moments of delight.
92
+
- **Reference:** Bluesky's visual language is a natural touchpoint — the airy feel, the rounded shapes, the blue. skystar.social should feel like it belongs in the same ecosystem without being a clone. It's the fun neighbor, not the corporate sibling.
93
+
- **Anti-references:** Dense analytics dashboards. Dark-mode-with-neon "hacker" aesthetics. Anything that makes social media feel like work.
94
+
- **Theme:** Light mode primary, dark mode supported. Both should feel equally considered.
95
+
- **Color anchors:** Bluesky blue and heart red as the two emotional poles — discovery and appreciation. Neutrals should feel warm, not clinical.
96
+
97
+
### Design Principles
98
+
1. **Fast to feel, not just fast to load.** Every interaction should feel instant and rewarding. Optimistic UI, snappy transitions, no waiting states that feel like waiting.
99
+
2. **Delight in the details.** The big picture is simple. The magic is in the small things — a subtle animation when a post appears, the way numbers count up, the warmth of the color palette.
100
+
3. **Social media should be fun.** This is a celebration of good posts, not a performance report. The tone is congratulatory, never judgmental. Empty states are encouraging, not clinical.
101
+
4. **Belong to the Bluesky world.** Users should feel at home coming from Bluesky. Respect their visual vocabulary — rounded shapes, airy spacing, familiar blue — while adding skystar's own personality.
102
+
5. **Simple until it isn't.** Start minimal. As features like leaderboards, post-of-the-day, and notifications arrive, the design system should accommodate complexity without losing its lightness.
+15
-16
config/shield.ts
+15
-16
config/shield.ts
···
11
11
* to learn more
12
12
*/
13
13
csp: {
14
-
/**
15
-
* Enable Content Security Policy headers.
16
-
* CSP helps prevent XSS attacks by controlling which resources can be loaded.
17
-
*/
18
-
enabled: false,
19
-
20
-
/**
21
-
* CSP directives define the allowed sources for different resource types.
22
-
* Example: { defaultSrc: ["'self'"], scriptSrc: ["'self'", "'unsafe-inline'"] }
23
-
*/
24
-
directives: {},
25
-
26
-
/**
27
-
* When true, CSP violations are reported but not enforced.
28
-
* Useful for testing CSP policies before enforcing them.
29
-
*/
14
+
enabled: true,
15
+
directives: {
16
+
defaultSrc: [`'self'`],
17
+
// Alpine.js uses new Function() internally, requiring 'unsafe-eval'
18
+
scriptSrc: [`'self'`, `'unsafe-eval'`],
19
+
// Alpine x-bind:style sets inline styles, requiring 'unsafe-inline'
20
+
styleSrc: [`'self'`, `'unsafe-inline'`],
21
+
imgSrc: [`'self'`, 'data:', 'https://cdn.bsky.app', 'https://video.bsky.app'],
22
+
connectSrc: [`'self'`],
23
+
fontSrc: [`'self'`],
24
+
objectSrc: [`'none'`],
25
+
baseUri: [`'self'`],
26
+
formAction: [`'self'`],
27
+
frameAncestors: [`'none'`],
28
+
},
30
29
reportOnly: false,
31
30
},
32
31